@font-face {
    font-family: "Roboto";
    src:
      local("Roboto"),
      url("/assets/Roboto-Medium.ttf");
    font-weight: medium;
  }
  @font-face {
    font-family: "Roboto";
    src:
      local("Roboto"),
      url("/assets/Roboto-Bold.ttf");
    font-weight: bold;
  }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; padding: 0; color: #554; font: 1.125rem/1.5rem Roboto, sans-serif;
  }
  section {
    padding-left: 1rem!important; padding-right: 1rem!important;
  }
  h2 {
    margin: 0; padding: 0;
  }
  hr {
    border: none; margin: 2rem auto; max-width: 58rem; background: url(/assets/divider.jpg) no-repeat center; background-size: contain; aspect-ratio: 94 / 11;
  }
  .button {
    display: inline-block; aspect-ratio: 80 / 23; text-shadow: 0 .25rem #0003; background: url(/assets/button-green.png) no-repeat center; background-size: contain; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; width: 20rem; color: #fff; text-decoration: none; transition: transform .1s ease-in-out; text-align: center;
    &.button-gold { background-image: url(/assets/button-gold.png); }
    &.button-small { width: 15rem; font-size: 1.25rem; text-shadow: 0 .125rem #0003; }
    &.button-facebook { background-image: url(/assets/button-facebook.png); font-size: 1.55rem; text-shadow: 0 .125rem #0003 }
    &:hover { transform: scale(1.01); opacity: .9; }
    @media(max-width: 800px) {
      width: 15rem; font-size: 1.25rem; text-shadow: 0 .125rem #0003;
    }
  }

  .intro {
    text-align: center; background: linear-gradient(to top, #fff, #fff0 30%), url(/assets/intro-background.jpg) no-repeat top center; background-size: cover; color: #C9983F; padding-top: 1rem;
    .intro-logo { height: 4rem; display: block; margin: 2rem auto; }
    .intro-characters { width: 100%; max-width: 35rem; margin: 2rem auto; display: block; }
    .intro-buttons {
      display: flex; gap: 2rem; justify-content: center;
    }
    p { font-size: 2rem; line-height: 2rem; max-width: 55rem; margin: 2rem auto; text-wrap: balance; }
    @media(max-width: 800px) {
      .intro-buttons {
        flex-direction: column; gap: 0; align-items: center;
      }
    }
  }

  .screenshots {
    display: flex; gap: 2rem; align-items: center; justify-content: center; min-height: 45vw;
    img { max-width: 40%; object-fit: contain; transition: max-width 1s ease-in-out;
      &:hover {
        max-width: 45%;
      }  
    }
    @media(max-width: 800px) {
      flex-direction: column; gap: 1rem;
      img { max-width: 80%;
       &:nth-child(1) { margin-left: -10%; }
       &:nth-child(2) { margin-left: 10%; }
     }
    }
  }

  .benefits {
    background: url(/assets/benefits-background.jpg) no-repeat center; background-size: contain; text-align: center; padding: 2rem 0;
    .benefits-list { max-width: 48rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem auto;
      .benefits-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; background: url(/assets/benefits-frame.png) no-repeat center; background-size: contain; aspect-ratio: 49 / 68; color: #d29526; font-weight: bold; text-align: center; font-size: 1.5rem; line-height: 100%; padding: 0 5%; box-sizing: border-box;
        img { max-width: 90% }
      } 
    }
    @media(max-width: 800px) {
      .benefits-list {
        display: flex; width: calc(100%); gap: 3vw; overflow-x: scroll; margin: 2rem -1rem; padding: 3vw; scroll-snap-type: x mandatory; 
        .benefits-item {
          min-width: 45.5vw; flex-grow: 1; font-size: 1.25rem; scroll-snap-align: start; scroll-margin: 3vw; box-sizing: border-box;
        }
      }
    }
  }

  .download_install {
    background: url(/assets/install-background.jpg) no-repeat center; background-size: cover; padding: 2rem 0;
    .install-tabs {
      background: #fff; max-width: 50rem; padding: 2rem; border-radius: 1rem; margin: 0 auto;
      .platform-selector {
        text-align: center; margin-bottom: 2rem; display: flex; justify-content: center;
        input { display: none }
        label {
          padding: 1rem 2rem; border-radius: 2rem; width: 10rem; background: #EDEAE5; display: block; cursor: pointer;
          &:nth-child(2) { border-bottom-right-radius: 0; border-top-right-radius: 0; }
          &:nth-child(4) { border-bottom-left-radius: 0; border-top-left-radius: 0; }
        }
        input:checked + label { 
          color: #fff; background: #d29526 linear-gradient(to bottom,  #FFD962 20%, #C57B25 80%, #F3B743 90%); box-shadow: 0 1px #AF643A inset; text-shadow: 0 2px #AF643A;
        }
      }
      #android, #web { display: none; }
      #android { flex-direction: row-reverse; align-items: flex-start; gap: 2rem; }
      .platform-selector:has(input#android_tab:checked) + #android { display: flex; }
      .platform-selector:has(input#web_tab:checked) ~ #web { display: block; }
      video { border-radius: 1rem; max-width: 100%; margin-bottom: 2rem; }
    }
    .instructions-step { padding: 1rem 1rem 1rem 3rem; border-top: 1px solid #0002;
      @media(max-width: 800px) { padding-left: 2rem; }
      .instructions-number {
        display: block; aspect-ratio: 1 / 1; color: #fff; width: 2rem; height: 2rem; text-align: center; line-height: 2rem; position: absolute; margin-left: -3rem; border-radius: 2rem; background: #d29526 radial-gradient(circle at top,  #FFD962 20%, #C57B25 80%, #F3B743 90%); box-shadow: 0 1px #AF643A inset; text-shadow: 0 2px #AF643A;
        @media(max-width: 800px) { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: .85rem; margin-left: -2rem; margin-top: .25rem; }
      }
      p { margin: .25rem; }
    }
    .instructions-warning {
      .instructions-number {
        background: #02BD44 radial-gradient(circle at top,  #54F765 20%, #00942A 80%, #00C443 90%); box-shadow: 0 1px #28823C inset; text-shadow: 0 2px #28823C;
      }
    }
    .instructions { max-width: 50rem; margin: 0 auto; margin-bottom: 2rem;
      h2 {
        margin: 4rem 0 2rem;
      }
    }
    .video { border-radius: 1rem; max-width: 20rem; aspect-ratio: 10 / 23;  }
    @media (max-width: 800px) {
      #android { flex-direction: column!important; }
      .install-tabs { padding: 1rem; margin: 0 -1rem; } 
    }
  }

  .legal {
    background: url(/assets/legal-background.jpg) no-repeat center bottom; background-size: cover; padding: 4rem 0 15vw;
    p { margin: 0 auto 1rem; max-width: 46rem; text-align: center; text-wrap: pretty;}
    .contact {
      background: url(/assets/contact-frame.png) no-repeat top center; background-size: cover; max-width: 40rem; aspect-ratio: 64 / 14; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; padding-top: 1rem;
      h2 {
        font-size: 1.5rem; line-height: 2rem; text-align: center;
      }
      .button { margin-bottom: -3rem; }
    }
    @media(max-width: 800px) {
      padding-bottom: 80vw;
      .contact { 
        h2 {
          font-size: 1.5rem;
        }
      }
    }
  }

  .footer {
    background: #000; color: #fff; padding: 2rem 0 5rem;
    .footer-content { margin: 0 auto; max-width: 54rem; display: flex; gap: 2rem; align-items: center;
      .footer-logo {
        img { max-width: 12.5rem; }
      }
      .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
        a {
          color: #fff; text-decoration: none; font-weight: bold; font-size: 1rem;
        } 
      } 
    }
    .footer-credit {
      text-align: center; font-size: .85rem; margin: 4rem auto 2rem;
    }
    .footer-fixed {
      display: flex;
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 1rem;
      .footer-language {
        display: flex;
        align-items: center;
        padding-bottom: .25rem;
        .button-language {
          background: #fff; border: 2px solid #E3AE4E; box-shadow: 0 2rem 2rem #0003, 0 .125rem .2rem #0002 inset; padding: .25rem 1rem; border-radius: 2rem; color: #554; text-decoration: none;
          &:hover {
             color: #fff; background: #d29526 linear-gradient(to bottom,  #FFD962 20%, #C57B25 80%, #F3B743 90%); text-shadow: 0 2px #AF643A;
          }
        }
      }
    }
    @media(max-width: 800px) {
      .footer-content {
        flex-direction: column;
      }
      .footer-fixed {
        padding: .5rem;
      }
    }
  }

  #select-language {
    position: fixed;
    right: 2rem;
    bottom: 8rem;
    background: #fff;
    border: 2px solid #E3AE4E;
    box-shadow: 0 2rem 2rem #0003, 0 .2rem .5rem #0003 inset;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 1rem;
    flex-direction: column;
    border-radius: 1rem;
    z-index: 200;
    a {
      color: #554; text-decoration: none; font-size: .85rem; padding: .125rem 1rem; display: block;
      &:hover {
        opacity: 1; color: #fff; border-radius: 2rem; background: #d29526 linear-gradient(to bottom,  #FFD962 20%, #C57B25 80%, #F3B743 90%); box-shadow: 0 1px #AF643A inset; text-shadow: 0 2px #AF643A;
      }
    }
    &:target {
      display: grid;
    }
    @media(max-width: 800px) {
      right: 1rem; left: 1rem; bottom: 6.5rem; padding: 1rem .5rem;
      a {
        padding: .125rem .75rem;
      }
    }
    a.curtain {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0001; border-radius: 0; z-index: -1; text-indent: -100vw; font-size: 1px; text-shadow: none;
    }
  }