* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #078fd8;
}

.page {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 100vh;
}

.panel {
  position: relative;
  width: 100vw;
  max-width: none;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #f5d315;
  box-shadow: none;
}

.panel + .panel {
  margin-top: -1px;
}

.panel img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.sections-panel {
  aspect-ratio: 1672 / 906;
}

.sections-panel img,
.sections-panel .hotspots {
  height: 103.86%;
}

.hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 9px;
  cursor: pointer;
}

.hotspot:focus-visible,
.hotspot:hover {
  outline: none;
  background: transparent;
}

.hero-panel .nav {
  top: 3.3%;
  height: 5.4%;
}

.hero-panel .nav.home {
  left: 31.8%;
  width: 4.6%;
}

.hero-panel .nav.about {
  left: 38.2%;
  width: 5.1%;
}

.hero-panel .nav.tokenomics {
  left: 45.2%;
  width: 8.7%;
}

.hero-panel .nav.roadmap {
  left: 55.9%;
  width: 7.2%;
}

.hero-panel .nav.community {
  left: 65.1%;
  width: 8.3%;
}

.hero-panel .buy {
  left: 84.8%;
  top: 1.9%;
  width: 12.9%;
  height: 8.3%;
}

.hero-title {
  left: 28.8%;
  top: 12%;
  width: 38%;
  height: 49%;
  border-radius: 0;
}

.join {
  left: 36%;
  top: 74%;
  width: 14%;
  height: 7.5%;
}

.how {
  left: 51.2%;
  top: 74%;
  width: 12%;
  height: 7.5%;
}

.ticker {
  left: 42.8%;
  top: 83%;
  width: 18%;
  height: 8.5%;
}

.sections-panel .card {
  top: 2%;
  width: 21.7%;
  height: 38%;
}

.sections-panel .card.one {
  left: 2.1%;
}

.sections-panel .card.two {
  left: 25.6%;
}

.sections-panel .card.three {
  left: 48.5%;
}

.sections-panel .card.four {
  left: 71.1%;
  width: 24%;
}

.sections-panel .token {
  top: 49.5%;
  width: 11.6%;
  height: 19.5%;
}

.sections-panel .token.one {
  left: 2%;
}

.sections-panel .token.two {
  left: 14.4%;
}

.sections-panel .token.three {
  left: 27.8%;
  width: 8.5%;
}

.sections-panel .token.four {
  left: 37.1%;
  width: 7.9%;
}

.sections-panel .phase {
  top: 49.4%;
  width: 13.2%;
  height: 21%;
  border-radius: 20px;
}

.sections-panel .phase.one {
  left: 47.3%;
}

.sections-panel .phase.two {
  left: 62.2%;
  width: 18.2%;
}

.sections-panel .phase.three {
  left: 82%;
  width: 15.5%;
}

.footer-title {
  left: 4.6%;
  top: 73.6%;
  width: 21%;
  height: 21%;
}

.social {
  top: 76.2%;
  width: 4.1%;
  height: 7.2%;
  border-radius: 50%;
}

.social.x {
  left: 77.2%;
}

.social.discord {
  left: 83.1%;
}

.social.youtube {
  left: 89.7%;
}

.mobile-panel {
  display: none;
}

@media (max-width: 700px) {
  body {
    background: #078fd8;
  }

  .hero-panel,
  .sections-panel {
    display: none;
  }

  .mobile-panel {
    display: block;
    aspect-ratio: 941 / 1597;
  }

  .mobile-panel img,
  .mobile-panel .hotspots {
    top: -3%;
    height: 104.7%;
  }

  .mobile-buy {
    left: 81%;
    top: 3.4%;
    width: 16%;
    height: 3.1%;
  }

  .mobile-title {
    left: 29%;
    top: 8.6%;
    width: 43%;
    height: 21%;
    border-radius: 0;
  }

  .mobile-join {
    left: 31.5%;
    top: 33.2%;
    width: 18.8%;
    height: 3.6%;
  }

  .mobile-how {
    left: 51.2%;
    top: 33.2%;
    width: 16.2%;
    height: 3.6%;
  }

  .mobile-card {
    top: 47.2%;
    width: 21.4%;
    height: 16%;
  }

  .mobile-card.one {
    left: 3.4%;
  }

  .mobile-card.two {
    left: 27.6%;
  }

  .mobile-card.three {
    left: 51.1%;
  }

  .mobile-card.four {
    left: 74.3%;
  }

  .mobile-community {
    left: 4.5%;
    top: 89.8%;
    width: 27%;
    height: 8%;
  }

  .mobile-social {
    top: 90.7%;
    width: 4.4%;
    height: 2.7%;
    border-radius: 50%;
  }

  .mobile-social.x {
    left: 80.1%;
  }

  .mobile-social.discord {
    left: 84.8%;
  }

  .mobile-social.youtube {
    left: 89.5%;
  }
}