/* latin */
@font-face {
  font-family: 'Baloo Thambi 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/css/fonts/BalooThambi2-Latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;

  cursor: default;
  background-color: #D5E4EE;

  text-align: center;
  font-family: 'Baloo Thambi 2', cursive;

  display: flex;
  flex-direction: column;
}

.class-banner-div {
  position: absolute;
  width: 100%;
  height: 100%;
}

.class-picture-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-picture-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.class-picture-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
#picture-bg-uppper {
  position: absolute;
  bottom: 177vw;
  left: 0%;
  width: 100vw;
  height: 94.8vw
}

@media (max-aspect-ratio: 15/9) {
  #picture-minigames {
    display: none;
  }
  #picture-scan {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30vw;
    height: 19.39vw;
  }
  #picture-character {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 90%;
    height: 60%;
  }
}
@media (min-aspect-ratio: 15/9) {
  #picture-minigames {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 51.35vh;
    height: 95vh;
  }
  #picture-scan {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 55.695vh;
    height: 36vh;
  }
  #picture-character {
    position: absolute;
    bottom: 10%;
    left: 0%;
    width: 82%;
    height: 60%;
  }
}

@media (max-aspect-ratio: 21/20) {
  #picture-bg {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100vw;
    height: 177.78vw;
  }
  #picture-scan {
    display: none;
  }
  #picture-character {
    position: absolute;
    bottom: 13vw;
    left: 5vw;
    width: 90vw;
    height: 48.6vw;
  }
  #img-slogan {
    position: absolute;
    bottom: 12.3vw;
    left: 5vw;
    width: 90vw;
    height: 3.5vh;
  }
}

@media (min-aspect-ratio: 21/20) {
  #picture-bg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }
  #img-slogan {
    position: absolute;
    bottom: 9.7vh;
    left: 5vw;
    width: 90vw;
    height: 3.5vh;
  }
}

#copyright-div {
  position: absolute;
  bottom: 1%;
  left: 1%;
  width: 75%;
  height: 7%;
  text-align: left;
  color: #FFF;
}

#privacy-div {
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 25%;
  height: 6%;
  text-align: right;
}

@media (max-aspect-ratio: 2/3) {
  #img-slogan {
    position: absolute;
    bottom: 62vw;
    left: 5vw;
    width: 90vw;
    height: 23dvh;
  }
  #copyright-div {
    bottom: 1vw;
    height: 11vw;
  }
  .copyright-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 2.4vw;
  }
  #privacy-div {
    height: 10vw;
  }
  #privacy-link {
    margin-right: 2vw;
    font-size: 3vw;
  }
}

@media (min-aspect-ratio: 2/3) {
  .copyright-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 1.6vh;
  }
  #privacy-link {
    margin-right: 1.5vh;
    font-size: 1.9vh;
  }
}

@media (max-aspect-ratio: 65/100) {
  #picture-minigames-portrait {
    position: absolute;
    top: 44vw;
    bottom: 75vw;
    left: 0vw;
    width: 100vw;
  }
}

@media (min-aspect-ratio: 65/100) {
  #picture-minigames-portrait {
    display: none;
  }
}

#picture-logo {
  position: absolute;
  top: 0%;
  left: 10%;
  width: 80%;
  height: 22%;
}

@media (max-aspect-ratio: 3/4) {
  #store-badge-div {
    position: absolute;
    top: 23.5dvh;
    left: 15vw;
    width: 70vw;
    height: 9.5vw;
  }
  #a-appstore {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 45%;
    height: 100%;
  }
  #a-googleplay {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 50%;
    height: 100%;
  }
  #coming-soon-div {
    position: absolute;
    top: 18dvh;
    right: 20vw;
    width: 60vw;
    height: 10vw;
    display: none; /* to update in js */
    align-items:center;
    justify-content:center;
    color: #FFF;
    font-size: 4.5vw;
  }
}

@media (min-aspect-ratio: 3/4) {
  #store-badge-div {
    position: absolute;
    top: 21dvh;
    left: 40vw;
    width: 45dvh;
    height: 6dvh;
  }
  #a-appstore {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50%;
    height: 100%;
  }
  #a-googleplay {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 100%;
  }
  #coming-soon-div {
    position: absolute;
    top: 21dvh;
    right: 60vw;
    width: 25dvh;
    height: 6dvh;
    display: none; /* to update in js */
    align-items:center;
    justify-content:center;
    color: #FFF;
    font-size: 3vh;
  }
}