@font-face {
  font-family: 'Reward';
  src: url('./assets/fonts/RewardFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'WesternBang';
  src: url('./assets/fonts/WesternBangBang-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@main-color: #3F342F;
@bg-color: #E3BC9A;
@light-bg-color: #FFFEE5;

@md-screen: 960px;
@sm-screen: 600px;

html {
  font-size: 16px * (100vh / 1280px);
  font-family: Reward;
}

body {
  overscroll-behavior-y: none;
}

a {
  color: darken(@bg-color, 30%);
  &:hover {
    color: darken(@bg-color, 15%);
  }
  text-decoration: none;
}

.menu {
  padding: 1rem 3rem;
  height: 5.25rem;
  transition: top .2s ease-in;
  background-color: @light-bg-color;
  z-index: 990;

  .menu-toggle {
    display: none;
  }

  .menu-list {
    width: 65%;
    color: @main-color;
    flex-direction: row;
  }

  .site-title, a.menu-link {
    font-size: 4.5rem;
    line-height: .65em;
    margin-right: 2rem;
    img {
      height: 70%;
    }
  }

  .social-link {
    width: 25%;
    padding: .5rem .25rem .25rem 0;

    a {
      margin-left: 1.5rem;
      height: 100%;
      aspect-ratio: 1 / 1;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.menu.hidden {
  top: -6rem;
}


#landing {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: auto;
  background: @bg-color;

  &:before {
    position: absolute;
    bottom: 0;
    left: 4rem;
    width: 36rem;
    height: 24rem;
    content: "";
    background: url('./uploads/3/665dcc436dd77.png') 0 0 no-repeat;
    background-size: cover;
    transform: rotate(20deg);
  }
  
  .poster {
    height: 80%;
    aspect-ratio: 11 / 16;
    position: relative;
    top: 12%;
    margin: auto;
    padding: 2rem 4.5rem;
    background-image: url('./uploads/3/665dcc43742c7.png');
    background-size: cover;
    box-shadow: .5rem .5rem 2rem @main-color;

    .poster-title {
      width: 100%;
      color: @main-color;
      
      font-size: 10.5rem;
      line-height: 0.8em;
      text-align: center;
      margin: 5.25rem 0 0 0;
    }

    .poster-photo {
      height: 40%;
      aspect-ratio: 1 / 1;
      border: 2px solid @main-color;
      margin: 4% auto 0 auto;
      background-color: @light-bg-color;
      background-image: url('./uploads/3/665dcc42ed36f.jpg');
      background-size: cover;
    }

    .poster-info {
      font-family: Reward;
      text-align: center;
      color: @main-color;
      display: flex;
      flex-direction: column;
      align-items: center;
      .slogan {
        font-size: 4.5rem;
        line-height: .75em;
        text-align: justify;
        text-align-last: justify;
        width: 72%;
      }
      .name {
        font-size: 10.5rem;
        line-height: .65em;
      }
      .bonus {
        display: flex;
        margin-top: 1rem;
        width: 100%;
        .numbers {
          font-family: WesternBang;
          font-size: 5.5rem;
          line-height: .90em;
          width: 65%;
        }
        .cash, .contact {
          font-size: 2rem;
          line-height: .75em;
        }
      }
      .socials {
        display: flex;
        width: 72%;
        justify-content: space-around;
        font-size: 2.25rem;
      }
      .contracts {
        margin-top: .75rem;
        font-size: 1.5rem;
        font-family: WesternBang;
        font-weight: 700;
      }
    }
  }
}

#gallery {
  padding: 4rem;
  margin: 0;
  width: auto;
  background: @main-color;
  color: @light-bg-color;
  .title {
    margin-top: 2rem;
    font-family: WesternBang;
    font-size: 8rem;
    line-height: .75em;
  }
  .showcase {
    margin: 4rem 0;
    .showcase-image {
      background-size: cover;
      width: 14.4%;
      margin: 1%;
      aspect-ratio: 1 / 1;
      border: 2px solid @light-bg-color;
    }
  }
}

#gallery-extra {
  padding: 0;
  margin: 0;
  width: auto;
  min-height: 35vh;
  color: @main-color;
  background: @bg-color;
  .showcase {
    .showcase-image {
      background-size: cover;
      width: calc(1 / 12 * 100%);
      margin: 0;
      aspect-ratio: 1 / 1;
      line-height: 0;
      img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }
    }
  }
}


// For small screens
@media screen and (max-device-width: @sm-screen) {
  html {
    font-size: 16px;
  }

  #landing {
    &:before {
      width: 60vw;
      height: 40vw;
    }
    height: 96rem;
  }

  #gallery {
    .showcase .showcase-image {
      width: 45%;
      margin: 2.5%;
    }
  }

  .menu {
    .menu-toggle {
      display: block;
      padding: 1.6rem 0;
      margin-right: 2rem;
      cursor: pointer;
      .hamburger,
      .hamburger::before,
      .hamburger::after {
        content: '';
        display: block;
        background: @main-color;
        height: .3rem;
        width: 2rem;
        border-radius: .25rem;
        transition: all ease-in-out 0.3s;
      }
      
      .hamburger::before {
        transform: translateY(-.6rem);
      }
      .hamburger::after {
        transform: translateY(.3rem);
      }
    }

    .menu-list {
      position: fixed;
      z-index: -1;
      width: 60vw;
      height: 100vh;
      flex-direction: column;
      background: @light-bg-color;
      padding: 6.5rem 3rem 2rem 3rem;
      top: 0;
      left: -60vw;
      transition: left 0.2s ease-in;
      a {
        height: 3.25rem;
        margin: 1rem 0;
      }
    }

    .social-link {
      width: 80%;
    }
    
    // Open Status for Menu
    &.open {
      .hamburger {
        transform: rotate(45deg);
      }
      .hamburger::before {
        opacity: 0;
      }
      .hamburger::after {
        transform: translateY(-.3rem) rotate(-90deg);
      }
      .menu-list {
        left: 0;
      }
    }
  }
}

@media screen and (max-width: @md-screen) {
  #gallery {
    .showcase .showcase-image {
      width: 22.5%;
      margin: 1.25%;
    }
  }
}