@font-face {
  font-family: 'Goldplay';
  src: url('../fonts/Goldplay-Bold.ttf') format('truetype')
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Goldplay', 'Montserrat', sans-serif;
  background-image: url(../images/portrait-bg.png);
  background-size: cover;
  background-position: 0 50%;
}

.content {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  grid-template-rows: min-content auto;
  gap: 3rem;
  justify-items: center;
  justify-content: space-between;
  padding: 48px 48px 96px 48px;
}

.logo-img {
  content: url(../images/logo.png);
  max-width: 250px;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.login-button {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  background-color: #fff;
  color: #940000;
  border: 0;
  transition: opacity 1s;
  height: 52px;
  line-height: 52px !important;
  align-self: end;
}

a:hover,
a:active,
a:visited {
  opacity: 0.9;
}

@media (orientation: landscape) {
  body {
    background-image: url(../images/landscape-bg.png);
  }

  .content {
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content auto;
    justify-items: center;
    justify-content: space-between;
    padding: 24px;
  }

  .logo-img {
    grid-column: 2 / 3;
  }

  .login-button {
    align-self: center;
    grid-column: 1 / 2;
    justify-self: start;
    margin-left: 10%;
  }
}

@media screen and (min-width: 1024px) {
  body {
    background-position: right;
  }

  .content {
    padding: 48px;
  }

  .logo-img {
    max-width: 360px;
  }

  .login-button {
    margin-left: 20%;
  }

  .content {
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
  }
}