:root {
  --main-font: "Fauna";
  --secondary-font: "Proxon";
  --subtitle-font: "Titilium";
  --text-font: "Tilda";
  --h1: calc(170 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --h2: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --h3: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --h4: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --p: calc(16 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --progress-size: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  --btn: #FBF665;
  --a: #FBF665;
  --primary-color: #FBF665;
  --ideal-viewport-width: 1920;
  --current-viewport-width: 100vw;
}

@font-face {
  font-family: "Fauna";
  src: url(/fonts/Fauna.ttf);
}
@font-face {
  font-family: "Titilium";
  src: url(/fonts/Titilium.ttf);
}
@font-face {
  font-family: "Proxon";
  src: url(/fonts/Proxon.ttf);
}
@font-face {
  font-family: "Tilda";
  src: url(/fonts/TildaSans.ttf);
}
html {
  overflow: hidden;
}

body {
  overflow: hidden;
  height: 100vh;
}

section {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: var(--primary-color);
}

section .container {
  z-index: 5;
}

.slide {
  transform: translateY(125%) rotate(15deg);
  content-visibility: auto;
}

.slide.show {
  animation: slideSnow 0.6s ease-out forwards;
}

.slide.unload {
  display: none;
  height: 0 !important;
  top: -200vh;
}
.slide.unload * {
  display: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background-image: none;
}

@keyframes slideSnow {
  0% {
    transform: translateY(125%) rotate(15deg);
  }
  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
@keyframes fadeBlur {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
    display: none;
  }
}
@keyframes fadeBlurReverse {
  0% {
    opacity: 0;
    filter: blur(calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.mouse {
  position: absolute;
  bottom: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: calc(50% - calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 30;
}

.mouse img:first-child {
  z-index: 2;
}

.mouse:hover img:first-child {
  transform: scale(0.7);
}

.mouse:hover img:last-child {
  transform: scale(3);
}

.mouse img:last-child {
  animation: rotate 6s linear infinite;
  position: absolute;
  left: 0%;
  top: 20%;
  transform: scale(0);
  transition: 0.8s;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
/* width */
::-webkit-scrollbar {
  width: calc(4 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

/* Track */
::-webkit-scrollbar-track {
  background: #fbf665;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff;
}

* {
  transition: 0.6s;
  position: relative;
}

.container {
  position: relative;
  max-width: 90%;
}

img {
  max-width: 100%;
}

h1 {
  font-family: var(--main-font);
  font-size: var(--h1);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
}

h2 {
  font-family: var(--main-font);
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

h3 {
  font-family: var(--subtitle-font);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

h4 {
  font-family: var(--subtitle-font);
  font-size: var(--h4);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

p {
  font-family: var(--text-font);
  font-size: var(--p);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  letter-spacing: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin: 0;
}

a {
  font-family: var(--text-font);
  font-size: var(--p);
  font-weight: 400;
  line-height: 1.2;
  color: var(--a);
  text-decoration: none;
}

.card {
  border: none !important;
  transition: 0.6s;
}

.btn {
  font-family: var(--main-font);
  text-transform: uppercase;
  font-size: var(--text-font);
  background: var(--primary-color);
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
  padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  border-radius: 0;
  min-width: calc(135 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

#preloader > img {
  width: calc(650 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#preloader .ufo {
  position: absolute;
  z-index: 2;
}

.loading-progress {
  position: absolute;
  right: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: var(--progress-size);
  font-family: var(--secondary-font);
}

#preloader .ufo {
  left: 0;
  bottom: 0;
  flex-direction: column;
  display: flex;
  align-items: end;
}

#preloader .ufo:not(.step-90) {
  opacity: 0;
}

#preloader .ufo.step-10 {
  animation: ufo-step-10 1s ease-in forwards;
}

#preloader .ufo.step-20 {
  animation: ufo-step-20 1s ease-out forwards;
}

#preloader .ufo.step-20:before {
  top: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-85 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(230 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-2.png);
}

#preloader .ufo.step-30 {
  animation: ufo-step-30 1s ease-out forwards;
}

#preloader .ufo.step-30:before {
  top: calc(-15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-3.png);
}

#preloader .ufo.step-50 {
  animation: ufo-step-50 1s ease-out forwards;
}

#preloader .ufo.step-50:before {
  top: calc(-50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-4.png);
}

#preloader .ufo.step-70 {
  animation: ufo-step-70 1s ease-out forwards;
}

#preloader .ufo.step-70:before {
  top: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-58 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(170 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-5.png);
}

#preloader .ufo.step-80 {
  animation: ufo-step-80 1s ease-out forwards;
}

#preloader .ufo.step-80:before {
  top: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-58 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(170 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-5.png);
}

#preloader .ufo.step-90:before {
  opacity: 0;
  top: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-58 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(170 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-5.png);
}

@keyframes ufo-step-10 {
  from {
    opacity: 1;
    transform: translate(90vw, 55vh) rotate(-45deg) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate(20vw, -100vh) rotate(-75deg) scale(0.9);
  }
}
@keyframes ufo-step-20 {
  from {
    opacity: 1;
    transform: translate(-35vw, -125vh) rotate(110deg) scale(1.7);
  }
  to {
    opacity: 1;
    transform: translate(100vw, -20vh) rotate(85deg) scale(0.9);
  }
}
@keyframes ufo-step-30 {
  from {
    opacity: 1;
    transform: translate(-29vw, 43vh) rotate(10deg) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(75vw, -104vh) rotate(0deg) scale(1.2);
  }
}
@keyframes ufo-step-50 {
  from {
    opacity: 1;
    transform: translate(-24vw, -107vh) rotate(100deg) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate(102vw, -31vh) rotate(80deg) scale(1);
  }
}
@keyframes ufo-step-70 {
  from {
    opacity: 1;
    transform: translate(82vw, 52vh) rotate(-15deg) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(32vw, -105vh) rotate(-30deg) scale(1);
  }
}
@keyframes ufo-step-80 {
  from {
    opacity: 1;
    transform: translate(110vw, -50vh) rotate(-130deg) scale(1.1);
  }
  to {
    opacity: 1;
    transform: translate(70vw, 4vh) rotate(-132deg) scale(1.3);
  }
}
.ufo.step-90, .ufo.step-100 {
  opacity: 1;
  transform: translate(70vw, 4vh) rotate(-132deg) scale(1.3);
}

.ufo.step-90 img:last-child, .ufo.step-100 img:last-child {
  opacity: 0;
}

#preloader .ufo:before {
  content: "";
  position: absolute;
  top: calc(-15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(120 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(430 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Fire-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

#preloader .ufo:after {
  content: "";
  position: absolute;
  right: -39%;
  top: -7%;
  width: calc(350 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(200 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/preloader/Hit.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  rotate: 132deg;
  opacity: 0;
}

#preloader .ufo.step-90:after {
  animation: preloaderHit 1s ease-out forwards;
}

@keyframes preloaderHit {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
#preloader .ufo img:nth-child(1) {
  width: calc(150 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-right: calc(-55 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#preloader .ufo img:nth-child(2) {
  width: calc(450 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#preloader.loaded * {
  opacity: 0;
}

#preloader.faded {
  transform: translateX(100%);
}

header {
  padding-top: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  position: relative;
  z-index: 50;
}

header .container {
  display: flex;
  align-items: center;
  background: rgba(237, 237, 237, 0.5);
  border-radius: calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-backdrop-filter: blur(calc(435 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(435 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  box-shadow: 0 calc(6 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(6 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) 0 rgba(0, 0, 0, 0.25);
  max-width: 85%;
  padding: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

header .right.menu-wrapper {
  margin-left: calc(270 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

header .logo {
  width: calc(205 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

header .mobile-btn {
  display: none;
}

.dropdown:hover:before {
  rotate: 180deg;
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown-content {
  background-image: url(/img/Card-Menu.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(130 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  flex-direction: column;
  gap: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: right;
  -webkit-mask-image: url(/img/Card-Menu-Mask.png);
  mask-image: url(/img/Card-Menu-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  right: 0;
  margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.dropdown:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 100%;
  height: 70px;
}

.dropdown-content a {
  color: #000;
  transition: 0.2s;
}

.dropdown-content a:hover {
  color: var(--a);
}

.dropdown-content a.active {
  margin-bottom: 10px;
  color: var(--a);
}

.navbar {
  position: absolute;
  right: 5%;
  top: 0;
  flex-direction: column;
  z-index: 40;
  align-items: flex-end;
  width: calc(220 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: 100vh;
  justify-content: center;
  padding-right: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding-top: 13vh;
}

.dot {
  width: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-width: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-height: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: rgba(237, 237, 237, 0.5);
  border-radius: 50%;
  border: 1px solid #255d8d;
  top: calc(-2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.navbar a {
  display: flex;
  align-items: center;
  gap: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: var(--main-font);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: right;
}

.navbar span {
  opacity: 0;
  color: #fff;
}

.active .dot {
  background: var(--a);
}

.navbar .numbers {
  color: #fff;
  font-size: 50px;
  rotate: 90deg;
  margin-right: -36px;
  margin-top: 25px;
  font-weight: 700;
}

.navbar a:hover {
  height: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-right: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}
.navbar a:hover .dot {
  width: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-width: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-height: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}
.navbar a:hover span {
  opacity: 1;
}

.pagination {
  position: absolute;
  bottom: 8%;
  right: 2%;
  flex-direction: column;
  gap: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 60;
  display: none;
}
.pagination div {
  width: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: #FFC98E;
  border-radius: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination div:last-child {
  rotate: 180deg;
}

.burger-menu {
  width: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: flex;
  flex-direction: column;
  gap: calc(7 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  cursor: pointer;
}

.burger-menu span {
  width: 100%;
  display: flex;
  height: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: #1D71B8;
  transition: 0.2s;
}

.burger-menu:hover span {
  background: var(--a);
}

.burger {
  position: absolute;
  top: 14vh;
  right: 8%;
  width: 34%;
  z-index: 99;
  background-image: url(/img/Card-1.png);
  background-color: transparent;
  background-size: 100% 100%;
  padding: calc(85 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(140 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(55 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  transition: 2s;
  display: flex;
  flex-direction: column;
  gap: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: none;
}

.burger.active {
  display: flex;
}

.burger a {
  text-transform: uppercase;
  font-size: calc(17 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Fauna";
  color: #000;
}

.burger a:hover {
  color: var(--a);
}

.mobile-burger {
  position: absolute;
  right: 0;
  top: 0;
  width: 70vw;
  gap: 10px;
  z-index: 49;
  background: rgba(255, 234, 168, 0.5019607843);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  border-bottom-left-radius: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding: calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(420 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: none;
  flex-direction: column;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}

.mobile-burger.active {
  display: flex;
}

.mobile-burger a {
  font-family: var(--main-font);
  text-transform: uppercase;
  color: #000;
}

.mobile-burger .dropdown > p {
  font-family: var(--main-font);
  text-transform: uppercase;
  color: #000;
}

.mobile-burger .dropdown:before {
  filter: brightness(0);
}

.mobile-burger .dropdown-content {
  bottom: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: inherit;
  left: calc(-22 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: left;
  padding: 0;
  background: none;
  -webkit-mask: none;
          mask: none;
}

.mobile-burger .dropdown:hover .dropdown-content {
  display: none;
}

.mobile-burger .dropdown:hover:before {
  rotate: 0deg;
}

.mobile-burger:has(.dropdown-content.active) .dropdown:before {
  rotate: 180deg;
}

.mobile-burger .dropdown-content.active {
  display: flex !important;
}

.mobile-burger:has(.dropdown-content.active) > a {
  opacity: 0;
}

.mobile-burger .dropdown-content a:first-child {
  margin-bottom: inherit;
  color: #000;
}

.dropwdown .mobile-burger a {
  color: #000;
}

body:has(.mobile-burger.active) .burger-menu {
  background-image: url(/img/Close.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(2);
}
body:has(.mobile-burger.active) .burger-menu * {
  opacity: 0;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  align-items: center;
  justify-content: center;
  display: none;
  background: rgba(246, 190, 83, 0.5);
  -webkit-backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

.video video {
  z-index: 2;
}

.video.active {
  display: flex !important;
}

.video .card {
  width: 70%;
  -webkit-mask-image: url(/img/Card-Video-Mask.png);
  mask-image: url(/img/Card-Video-Mask.png);
  -webkit-mask-size: 100% 100%;
  height: 74vh;
}

.video:not(.active) .card {
  transform: translateY(200px);
  opacity: 0;
  transition: 0.8s;
}

.video .card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/img/Card-Video.png);
  background-size: cover;
  background-position: center;
}

.video .close {
  right: 10%;
  top: 5vh;
  display: flex;
  width: calc(95 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  opacity: 0.7;
}

section .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

section .frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.menu-wrapper {
  display: flex;
  align-items: center;
  gap: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.menu-wrapper * {
  text-transform: uppercase;
  font-family: var(--main-font);
  color: var(--a);
}

.left.menu-wrapper {
  margin-left: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.dropdown {
  cursor: pointer;
  margin-left: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.dropdown:before {
  content: "";
  position: absolute;
  left: calc(-30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/Dropdown.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.dropdown-content {
  position: absolute;
  display: none;
}

.play {
  margin-top: calc(-30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(-30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(200 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-left: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-right: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#home {
  align-items: center;
  display: flex;
}

#home .anim:not(.animate) {
  opacity: 0;
  transform: translateX(200px);
}

#home .card.big {
  opacity: 0;
  transform: translateY(calc(200 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#home.active .card.big {
  opacity: 1;
  transform: translateY(calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#home.active .title {
  opacity: 0;
  transform: translateY(calc(-200 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#home .container {
  margin-top: 15vh;
}

#home h2 {
  text-align: center;
}

#home h4 {
  text-align: center;
}

#home .mascot-1 {
  position: absolute;
  left: 52%;
  width: calc(260 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  bottom: 0%;
  z-index: 2;
  transition: 0.6s;
}

#home .mascot-2 {
  position: absolute;
  left: 64%;
  width: calc(390 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  bottom: 0%;
  transition: 0.6s;
}

#home .row {
  position: relative;
  padding-left: 8%;
}

#home .col-lg-5 {
  width: 45%;
}

#home .card.big {
  background-image: url(/img/Card-1.png);
  background-color: transparent;
  background-size: 100% 100%;
  padding: calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(115 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(55 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(115 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  transition: 2s;
}

#home .card p {
  font-size: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#home .title {
  position: absolute;
  left: 0;
  top: -10vh;
  opacity: 0.7;
  transition: 0.8s;
}

#home .title * {
  background-image: linear-gradient(90deg, #FFC98E, #00DF00, #BA3D60);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-backdrop-filter: blur(calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  filter: drop-shadow(calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) black);
}

#home .title *:last-child {
  font-size: calc(var(--h1) + calc(31 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#lore-launch {
  display: flex;
  align-items: flex-end;
}

#lore-launch .row {
  align-items: flex-end;
}

#lore-launch .col-lg-4:nth-child(1) {
  margin-bottom: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding-left: 8%;
  padding-right: 2%;
}

#lore-launch .col-lg-4:nth-child(2) {
  padding-left: 3%;
}

#lore-launch .col-lg-4:nth-child(3) {
  margin-bottom: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding-right: 2%;
}

#lore-launch .col-lg-4:nth-child(1) {
  margin-bottom: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding-left: 8%;
  padding-right: 2%;
}

#lore-launch .col-lg-4:nth-child(2) {
  padding-left: 3%;
}

#lore-launch .col-lg-4:not(.animate) {
  transform: scaleX(0.5) translateX(-30%);
}

#lore-launch .col-lg-4:nth-child(1) .card-comic {
  margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-left: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#lore-launch .col-lg-4:nth-child(2) .card-comic {
  margin-bottom: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-left: calc(160 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#lore-launch .col-lg-4:nth-child(3) .card-comic {
  margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-left: calc(160 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-width: -moz-max-content;
  min-width: max-content;
}

#lore-launch .card-comic:not(.animate) {
  opacity: 0;
  transform: scaleX(0.3) translateX(-50%);
}

.card-comic {
  padding: calc(7 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: #FBF665;
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  min-width: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: var(--h3);
  font-weight: 600;
}

#UFO-fly-1 .UFO {
  transform: translateX(-90%);
  width: calc(800 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#about {
  display: flex;
  align-items: center;
  padding-top: 25vh;
}

#about .col-lg-3 {
  display: flex;
  flex-direction: column;
  gap: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 99;
}

#about .col-lg-3:first-child {
  padding-right: 4%;
}

#about .col-lg-3:last-child {
  padding-left: 4%;
}

#about .mascot-1 {
  position: absolute;
  width: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 31%;
  bottom: -5vh;
  transition: 0.8s;
}

#about:has(.info-box.open, .info-box.open-full) .info-box:not(.open, .open-full) {
  opacity: 0;
}

.col-lg-3:first-child .info-box.open:last-child, .col-lg-3:first-child .info-box.open-full:last-child {
  transform: translateY(-115%);
}

.col-lg-3:last-child .info-box.open:first-child, .col-lg-3:last-child .info-box.open-full:first-child {
  transform: translateX(-385%);
}

.col-lg-3:last-child .info-box.open:last-child, .col-lg-3:last-child .info-box.open-full:last-child {
  transform: translate(-385%, -115%);
}

#about:has(.info-box.open, .info-box.open-full) .mascot-1 {
  left: 75%;
}

#about .close {
  right: -230%;
  top: calc(-50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.info-box {
  max-width: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.info-box > img {
  margin-bottom: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 1;
  cursor: pointer;
}

.info-box > p {
  width: 90%;
  font-size: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding: calc(4 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  margin-left: 5%;
  z-index: 3;
  cursor: pointer;
  text-transform: uppercase;
}

.info-box > p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  z-index: -1;
  transform: skew(-40deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

#about .info-box:not(.animate) {
  opacity: 0;
  transform: translateX(50px);
}

#about .mascot-1:not(.animate) {
  opacity: 0;
  transform: translate(80%, -5%) scale(0.8);
}

#about:not(.active) .ufo {
  transform: translate(35%, -230%) scale(0.4);
}

#about .ufo {
  position: absolute;
  right: -1%;
  width: 400px;
  top: 49%;
  transition: 1.7s;
}

.short-description, .full-description {
  display: none;
  position: absolute;
}

.short-description, .full-description {
  position: absolute;
}

.short-description *, .full-description * {
  z-index: 2;
}

.short-description {
  padding: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: 0;
  left: 110%;
  width: calc(600 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  transition: 0.3s;
}

.short-description:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/img/about/Short-Card.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  -webkit-mask-image: url(/img/about/Short-Card-Mask.png);
  mask-image: url(/img/about/Short-Card-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.short-description h2 {
  line-height: 1.5;
  margin-bottom: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.close {
  position: absolute;
  right: -225%;
  top: calc(-60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: none;
  cursor: pointer;
  width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.open .close, .open-full .close {
  display: flex;
}

.full-description {
  top: 0;
  width: calc(600 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 110%;
  background-image: url(/img/about/Full-Card.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  transition: 0.3s;
  max-height: 65vh;
  overflow-y: scroll;
}

.full-description .item {
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(65 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.full-description .item img {
  width: 32%;
  margin-right: calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.full-description h4 {
  font-family: var(--main-font);
  font-size: var(--p);
  margin-top: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#UFO-fly-2 .UFO > *:first-child {
  position: absolute;
  width: 100%;
  right: 21%;
  bottom: 115%;
  rotate: 60deg;
  opacity: 0;
}

#UFO-fly-2 .container:not(.load) .col-lg-7 {
  opacity: 0;
  transform: scaleX(0.5) translateX(-40%);
}

#UFO-fly-2 .container:not(.show) .card * {
  opacity: 0;
}

#UFO-fly-2 .container:not(.show) .col-lg-5 {
  opacity: 0;
}

#UFO-fly-2 .UFO.show-text > *:first-child {
  opacity: 1;
}

#UFO-fly-2 .UFO {
  position: absolute;
  transform: translate(-100%, 0%);
}

#UFO-fly-2 .card {
  background-color: transparent;
  background-image: url(/img/guild/Card-Description.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(130 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-left: -20%;
  margin-bottom: 15%;
  -webkit-mask-image: url(/img/guild/Card-Description-Mask.png);
  mask-image: url(/img/guild/Card-Description-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#UFO-fly-2 h2 {
  text-align: center;
  margin-bottom: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#UFO-fly-2 p {
  font-size: var(--h3);
  letter-spacing: calc(2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#UFO-fly-2 .row img:first-child {
  padding-left: 7%;
}

#UFO-fly-2 .row img:last-child {
  position: absolute;
  top: 0;
  right: 60%;
}

#UFO-fly-2 .row {
  align-items: flex-end;
  margin-top: 8vh;
  padding-right: 5%;
}

#UFO-fly-2 .UFO.show > *:first-child {
  opacity: 1;
}

#UFO-fly-2 .UFO > *:first-child {
  rotate: 50deg;
  min-width: calc(4900 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: -110%;
  bottom: 160%;
}

#trade {
  display: flex;
  align-items: center;
  padding-top: 20vh;
}

#trade .container {
  max-width: 59%;
}

#trade:not(.active) .card {
  transform: scaleX(0.5) translateX(-40%);
}

#trade .card {
  background-image: url(/img/trade/Card.png);
  background-size: 100% 100%;
  background-color: transparent;
  padding: calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(150 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(150 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#trade h2 {
  text-align: center;
}

#trade p {
  margin-bottom: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding-left: 10%;
  padding-right: 10%;
}

#trade h4 {
  padding-left: 10%;
  padding-right: 10%;
}

#trade .btns-wrapper {
  margin-top: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#trade .mascot-1 {
  position: absolute;
  left: 11%;
  bottom: 4%;
  width: calc(280 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 9;
}

#trade .chest {
  position: absolute;
  left: 14%;
  bottom: 0;
  width: calc(240 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  z-index: 9;
}

#trade .mascot-2 {
  position: absolute;
  right: 3%;
  bottom: -2%;
  width: calc(400 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#trade .anim:not(.animate) {
  opacity: 0;
  transform: translateY(100px);
}

.card .close {
  right: 3%;
  top: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: flex;
}

#trade .close {
  top: calc(-80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: 0;
}

#diamond-dust h2, #ether-crystals h2 {
  font-size: calc(var(--h2) + calc(12 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  margin-bottom: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  transition: none;
}

#diamond-dust {
  padding-bottom: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
  left: 0;
  top: 0;
  position: absolute;
}

#diamond-dust p {
  font-size: var(--h4);
  padding-left: 0;
  padding-right: 0;
}

#ether-crystals {
  padding-top: calc(105 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
  transition: none;
  left: 0;
  top: 0;
  position: absolute;
}

#ether-crystals p {
  font-size: var(--h4);
  padding-left: 0;
  padding-right: 0;
}

#guild {
  padding-top: 25vh;
}

#guild .mascot-1 {
  position: absolute;
  width: calc(210 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 11%;
  bottom: 6%;
}

@media only screen and (max-width: 1700px) {
  #guild .mascot-1 {
    bottom: 0%;
  }
}
#guild .mascot-2 {
  position: absolute;
  width: calc(390 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 68%;
  bottom: 0%;
}

#guild .mascot-3 {
  position: absolute;
  width: calc(220 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 33%;
  bottom: 0%;
  z-index: 5;
}

#guild .mascot-4 {
  position: absolute;
  width: calc(290 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  left: 54%;
  bottom: 0%;
}

#guild .anim:not(.animate) {
  opacity: 0;
  transform: translateX(150px);
}

#guild .full-description {
  left: 29%;
  top: -35vh;
}

#guild .full-description.active {
  display: block;
  z-index: 10;
}

#guild .card {
  background-image: url(/img/guild/Card.png);
  background-size: 100% 100%;
  background-color: transparent;
  padding: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(130 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(1000 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-mask-image: url(/img/guild/Card-Mask.png);
  mask-image: url(/img/guild/Card-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#guild .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#guild .info-box {
  width: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#guild .list {
  display: flex;
  flex-direction: column;
  gap: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#guild .list .item {
  display: flex;
  align-items: center;
  gap: calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.close-guild {
  position: absolute;
  left: 68%;
  top: -41vh;
  opacity: 0;
  width: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.close-guild.active {
  opacity: 1;
}

#guild:has(.description.active, .full-description.active) .mascot-3 {
  left: 3%;
  bottom: 2%;
}

#guild:has(.description.active, .full-description.active) .mascot-1 {
  left: 18%;
  bottom: 15%;
}

#guild:has(.description.active, .full-description.active) .mascot-2 {
  left: 73%;
}

#guild:has(.description.active, .full-description.active) .mascot-4 {
  left: 60%;
}

.description {
  position: absolute;
  bottom: 2vh;
  left: 14%;
  z-index: 5;
  width: calc(1070 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-image: url(/img/guild/Card-Description.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(240 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: none;
  transition: none;
}

#guild .container {
  max-width: 85%;
  margin-top: 16vh;
}

.description .close {
  display: flex;
  top: calc(-45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#three-tails .container {
  margin-top: 20vh;
}

#three-tails {
  transition: 0.9s;
}

#three-tails .row > div:first-child .card {
  background-image: url(/img/three-tails/Card.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(110 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-color: transparent;
  text-align: center;
  -webkit-mask-image: url(/img/three-tails/Card-Mask.png);
  mask-image: url(/img/three-tails/Card-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#three-tails .row > div:first-child .card-comic {
  padding: calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-width: auto;
  width: calc(390 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  font-family: var(--main-font);
  font-weight: 300;
  font-size: calc(var(--p) + calc(3 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  text-transform: uppercase;
  background: rgba(251, 246, 101, 0.8);
  opacity: 0;
}

#three-tails.loaded .row > div:first-child .card-comic {
  opacity: 1;
}

#three-tails .col-lg-6:last-child {
  opacity: 0;
}

#three-tails.loaded .col-lg-6 {
  opacity: 1;
}

#three-tails .container {
  transform: translateY(45vh);
}

#three-tails.loaded .container {
  transform: translateY(0vh);
}

#three-tails:not(.active) .row > div:first-child .card {
  transform: scaleX(0.4) translateX(-80%);
}

#three-tails:not(.active) .row > div:first-child .card h2 {
  opacity: 0;
}

#three-tails .row > div:last-child .card {
  background-image: url(/img/three-tails/Card-A.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-mask-image: url(/img/three-tails/Card-A-Mask.png);
  mask-image: url(/img/three-tails/Card-A-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#three-tails .col-lg-6 {
  display: flex;
  flex-direction: column;
  gap: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  align-items: center;
}

#three-tails .row > div:last-child .card p {
  font-size: calc(var(--p) + calc(9 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  line-height: 1;
}

#three-tails .row > div:last-child .card h2 {
  margin-bottom: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#three-tails .ufo {
  width: 460px;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
}

#three-tails .ufo.exists {
  opacity: 1;
}

#three-tails .container.hide {
  opacity: 0;
}

#three-tails .ufo img:last-child {
  position: absolute;
  bottom: 80%;
  width: 100%;
  left: 0;
  opacity: 0;
}

#three-tails .ufo.show img:last-child {
  opacity: 1;
}

#outpost .mascot-2 {
  position: absolute;
  right: 11%;
  width: calc(600 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: 21%;
}

#outpost .anim:not(.animate) {
  opacity: 0;
  transform: translateY(100px);
}

#outpost .container {
  margin-top: 20vh;
  padding-left: 7%;
  padding-right: 14%;
}

#outpost .card:first-child {
  background-image: url(/img/outpost/Card.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: calc(105 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  margin-bottom: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-mask-image: url(/img/outpost/Card-Mask.png);
  mask-image: url(/img/outpost/Card-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#outpost .card:last-child {
  background-image: url(/img/outpost/Card-A.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: calc(75 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-mask-image: url(/img/outpost/Card-A-Mask.png);
  mask-image: url(/img/outpost/Card-A-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#outpost .card:last-child p {
  font-size: calc(var(--p) + calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  line-height: 1;
}

#outpost-features .container {
  padding-top: 15vh;
}

#outpost-features .anim:not(.animate) {
  opacity: 0;
  transform: translateX(150px);
}

#outpost-features .row {
  margin-top: 5vh;
  justify-content: space-between;
}

#outpost-features .row .info-box {
  width: 20%;
}

#outpost-features .card {
  background-image: url(/img/outpost-features/Card.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: calc(105 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(110 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: -moz-fit-content;
  width: fit-content;
  margin-top: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-mask-image: url(/img/outpost-features/Card-Mask.png);
  mask-image: url(/img/outpost-features/Card-Mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  justify-self: right;
}

#outpost-features .description h4 {
  font-size: calc(var(--h4) + calc(7 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#outpost-features .description {
  padding: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(160 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
  bottom: 0vh;
  left: 0%;
  transition: none;
}

#outpost-features .row .info-box.open:nth-child(1) {
  transform: translate(32%, -105%);
}

#outpost-features .row .info-box.open:nth-child(2) {
  transform: translate(-101%, -105%);
}

#outpost-features .row .info-box.open:nth-child(3) {
  transform: translate(-235%, -105%);
}

#outpost-features .row .info-box.open:nth-child(4) {
  transform: translate(-368%, -105%);
}

#outpost-features:has(.info-box.open) .row .info-box:not(.open) {
  opacity: 0;
  transform: translateY(100%);
}

#outpost-features .description .close {
  top: calc(-60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-125 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(99 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#roadmap {
  padding-top: 30vh;
}

#roadmap .tabs {
  margin-bottom: 5vh;
}

.slider::part(pagination) {
  bottom: calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.slider::part(wrapper) {
  padding-bottom: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.tab {
  background: none;
  color: #000;
  min-width: 300px;
  border: none;
}

.tab p {
  font-size: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Titilium";
  letter-spacing: calc(2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.tab:before {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  transform: skew(-40deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

.roadmap-item {
  background-image: url(/img/roadmap/Card.png);
  background-size: 90% 100%;
  background-position: right;
  background-repeat: no-repeat;
  padding: calc(65 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(155 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(270 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  min-height: calc(350 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: flex;
  align-items: center;
}

.roadmap-item img {
  position: absolute;
  left: calc(0 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: calc(200 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  bottom: 0;
}

.roadmap-item h2 {
  font-size: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(-5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.roadmap-item h3 {
  font-size: calc(24 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  font-family: "Fauna";
}

.roadmap-item p {
  font-size: calc(22 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.roadmap-item .category {
  width: -moz-fit-content;
  width: fit-content;
  padding: calc(12 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  min-width: calc(300 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-align: center;
  position: absolute;
  left: calc(140 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  bottom: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.roadmap-item .category:before {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  transform: skew(-40deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

.roadmap-item .category p {
  font-size: calc(18 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Titilium";
  letter-spacing: calc(2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.slider::part(bullet) {
  width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: #909182;
  opacity: 1;
  border-radius: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  transition: 0.4s;
}

.slider::part(bullet-active) {
  width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background: #FBF665;
  opacity: 1;
  border-radius: 50%;
  transition: 0.4s;
}

#reviews {
  padding-top: 15vh;
}

#reviews .row {
  justify-content: flex-end;
}

#reviews .mascot {
  position: absolute;
  left: 10%;
  width: calc(410 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: calc(-25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.video-review {
  width: 52%;
  background: rgba(138, 140, 124, 0.5);
  padding: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  -webkit-backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

.video-review video {
  width: 100%;
}

.scroll {
  display: flex;
  gap: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  overflow-x: scroll;
  margin-top: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: 111%;
}

#reviews .item {
  width: calc(325 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding: 0 calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  background-size: 100% 100%;
  background-position: center;
  min-width: calc(325 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#reviews .anim:not(.animate) {
  opacity: 0;
  transform: translateY(100px);
}

#reviews .item strong {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  font-size: calc(16 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Tilda";
  letter-spacing: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#reviews .item p {
  z-index: 2;
  padding: calc(6 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: calc(16 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  align-self: flex-end;
  margin-right: calc(-30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-weight: 600;
  letter-spacing: calc(2 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-top: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#reviews .item p:after {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  z-index: -1;
  transform: skew(-40deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

#reviews .item a {
  z-index: 2;
  padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  align-self: flex-start;
  margin-left: calc(-10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  color: #000;
  font-weight: 600;
  letter-spacing: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#reviews .item a:after {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  z-index: -1;
  transform: skew(-40deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

#partners {
  align-items: flex-end;
  display: flex;
  padding-bottom: 0;
}

#partners .anim:not(.animate) {
  opacity: 0;
  transform: translateY(100px);
}

#partners .row:last-child {
  margin-top: calc(110 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  padding: calc(75 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: left;
  gap: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#partners .row img {
  position: absolute;
  top: calc(-90 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: -7%;
  width: calc(540 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#partners .row:last-child:after {
  content: "";
  position: absolute;
  left: -15vw;
  top: 0;
  width: 130vw;
  height: 100%;
  background: #1D1D1B;
}

#partners .row:last-child * {
  z-index: 2;
}

#partners .row:last-child a {
  color: #fff;
  font-family: var(--main-font);
  font-size: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
}

#partners .row:last-child .menu {
  display: flex;
  flex-direction: column;
  gap: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  width: -moz-fit-content;
  width: fit-content;
}

#partners .row:first-child {
  gap: 2%;
  justify-content: space-between;
  row-gap: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#partners .row:first-child p {
  width: 21%;
  font-size: calc(33 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  padding: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#partners .row:first-child p:after {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
  background: rgba(251, 246, 101, 0.5);
  z-index: -1;
  transform: skew(-20deg, 0deg);
  -webkit-backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
          backdrop-filter: blur(calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
  border: calc(1 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) solid #000;
}

#partners .row:first-child p:nth-child(1), #partners .row:first-child p:nth-child(2), #partners .row:first-child p:nth-child(3), #partners .row:first-child p:nth-child(4) {
  transform: translateX(calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
}

#UFO-fly-3 .ufo {
  width: 800px;
  position: absolute;
  left: 0;
  top: 0;
  transition: none;
}

#UFO-fly-3 .ufo img:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
}

#UFO-fly-3 .ufo img:last-child {
  position: absolute;
  width: calc(700 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  right: calc(-700 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  top: -25%;
}

#UFO-fly-3 .ufo:not(.show) img:last-child {
  opacity: 0;
}

#UFO-fly-3 .ufo.rotate img:first-child {
  opacity: 0;
}

#UFO-fly-3 .ufo:not(.rotate) img:nth-child(2) {
  opacity: 0;
}

body:has(#about-page) {
  overflow: visible;
}

html:has(#about-page) {
  overflow: scroll;
}

#about-page {
  height: -moz-fit-content;
  height: fit-content;
  overflow: visible;
  background: #fff;
}

#about-page h1 {
  font-size: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#about-page h2 {
  font-family: "Tilda";
  font-weight: 600;
  margin-bottom: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: calc(42 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#about-page .item {
  margin-top: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  margin-bottom: calc(105 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  display: flex;
  flex-direction: column;
  position: relative;
}

#about-page .item img {
  margin-top: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.sidebar > * {
  display: flex;
  flex-direction: column;
  gap: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.sidebar .small a {
  color: #000;
  font-size: calc(21 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  text-transform: uppercase;
  font-family: "Fauna";
}

.sidebar .big a {
  color: #000;
  font-size: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Fauna";
}

.sidebar .big {
  margin-top: calc(105 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  gap: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#about-page p {
  margin-bottom: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-size: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

#about-page ul li {
  font-size: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  font-family: "Tilda";
  color: #000;
  font-weight: 500;
  line-height: 1.2;
}

.sidebar img {
  width: 22%;
  margin-top: calc(-45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.sidebar {
  position: sticky;
  top: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

.sidebar a:hover {
  color: #ff982d;
}

#about-page .ufo img {
  position: absolute;
  left: 0;
  bottom: -35vh;
  opacity: 0;
}

#about-page .ufo img.active {
  opacity: 1;
}

.video .card {
  height: -moz-fit-content;
  height: fit-content;
}

.back {
  margin-bottom: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  filter: brightness(0);
  transition: 0.2s;
}

.back img {
  width: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  height: auto;
}

.back:hover {
  filter: brightness(1);
}

#about-page h1 {
  display: flex;
  align-items: center;
  gap: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
}

@media only screen and (max-width: 726px) {
  :root {
    --h2: calc(17 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    --h3: calc(19 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    --h4: calc(19 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    --ideal-viewport-width: 375;
  }
  .btn {
    font-size: calc(12 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding: calc(3 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    min-width: calc(95 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  section {
    padding: 0;
  }
  header {
    display: flex;
    justify-content: right;
    padding-top: 0;
  }
  header .container {
    background: transparent;
    margin: 0;
    margin-right: 5%;
    justify-content: space-between;
    max-width: 90%;
  }
  header .right.menu-wrapper {
    margin-left: 0;
  }
  .burger-menu span {
    background: var(--a);
  }
  .burger {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    width: 85%;
  }
  .burger a {
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .container {
    max-width: 100%;
  }
  header .left.menu-wrapper, header .play, header .right.menu-wrapper a, header .right.menu-wrapper > .dropdown {
    display: none;
  }
  header > .menu-wrapper {
    display: none;
  }
  .dropdown-content {
    margin-right: calc(-20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  header .container {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
  }
  header .logo {
    width: calc(145 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .mouse {
    display: none;
  }
  section {
    padding-bottom: 10vh !important;
  }
  #preloader > img {
    width: 70%;
  }
  #home .container {
    margin-top: -10vh;
    padding-left: 0;
    padding-right: 0;
  }
  #home .row {
    padding-left: 0%;
  }
  #home .col-lg-5 {
    width: 100%;
  }
  #home .card.big {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    opacity: 1;
    transform: translateY(calc(-70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width))) !important;
  }
  #home .mascot-1 {
    left: 10%;
    width: calc(130 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    bottom: 0%;
  }
  #home .mascot-2 {
    left: 44%;
    width: calc(170 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    bottom: 0%;
    z-index: 1;
  }
  #home .card p {
    text-align: center;
  }
  #home .title {
    display: none;
  }
  #lore-launch .col-lg-4:nth-child(1) {
    margin-bottom: 0;
    padding-right: 2%;
    padding-left: 45%;
  }
  #lore-launch .col-lg-4:nth-child(2) {
    margin-top: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    display: flex;
    flex-direction: column;
  }
  #lore-launch .col-lg-4:nth-child(3) {
    margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-bottom: 0;
    padding-right: 2%;
  }
  #lore-launch .col-lg-4:nth-child(2) img {
    order: -1;
    padding-right: 40%;
    margin-bottom: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #lore-launch .col-lg-4:nth-child(1) .card-comic {
    margin-left: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .card-comic {
    padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    font-size: calc(13 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #lore-launch .col-lg-4:nth-child(3) .card-comic {
    margin-left: 0;
    min-width: auto;
    width: 60%;
  }
  #lore-launch .col-lg-4:nth-child(2) .card-comic {
    margin-bottom: 0;
    margin-left: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    width: -webkit-fill-available;
  }
  #lore-launch .col-lg-4:nth-child(3) .card-comic {
    margin-top: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #lore-launch .col-lg-4:nth-child(3) img {
    padding-left: 30%;
  }
  #lore-launch .row {
    margin-bottom: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #UFO-fly-1 .UFO {
    transform: translate(-125vw, -45vh) scale(0.2);
  }
  #about {
    align-items: flex-start;
    padding-top: 20vh;
  }
  #about .row {
    justify-content: space-between;
  }
  #about .col-lg-3:first-child {
    width: 50%;
    order: 1;
  }
  #about .col-lg-6 {
    order: 3;
  }
  #about .col-lg-3:last-child {
    width: 50%;
    order: 2;
  }
  #about .col-lg-3 {
    gap: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #about .ufo {
    right: -11%;
    top: 56%;
    width: calc(240 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #about .mascot-1 {
    width: calc(110 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    left: 37%;
    bottom: -32vh;
  }
  #about:has(.info-box.open, .info-box.open-full) .mascot-1 {
    left: 37%;
    bottom: -20vh;
  }
  #about .info-box > p {
    min-height: calc(45 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    text-transform: none;
  }
  .info-box > p {
    font-size: calc(12 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .info-box.open, .info-box.open-full {
    max-width: none;
    width: calc(100vw - calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
    padding-left: 25%;
    padding-right: 25%;
    margin-top: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #about .info-box.open > p, #about .info-box.open-full > p {
    min-height: 40px;
  }
  .short-description {
    left: 0;
    width: calc(100vw - calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
    padding: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    top: 110%;
  }
  .short-description h2 {
    margin-bottom: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    line-height: 1.2;
  }
  .full-description {
    left: -12px;
    width: 100vw;
    max-height: 72vh;
    z-index: 9;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 20%;
  }
  #about .close {
    right: inherit;
    left: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    width: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    top: calc(-50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    z-index: 999;
  }
  #about .info-box.open-full .close {
    left: 78%;
    top: -5%;
    z-index: 99;
  }
  .info-box.open-full > p, .info-box.open-full > img {
    opacity: 0;
  }
  .full-description .item img {
    margin-right: calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .col-lg-3:first-child .info-box.open:last-child, .col-lg-3:first-child .info-box.open-full:last-child {
    transform: translateY(-60%);
  }
  .col-lg-3:last-child .info-box.open:first-child, .col-lg-3:last-child .info-box.open-full:first-child {
    transform: translateX(-54%);
  }
  .col-lg-3:last-child .info-box.open:last-child, .col-lg-3:last-child .info-box.open-full:last-child {
    transform: translate(-54%, -60%);
  }
  #UFO-fly-2 .row {
    margin-top: 8vh;
  }
  #UFO-fly-2 .card {
    margin-left: 0;
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-bottom: 5%;
  }
  #UFO-fly-2 h2 {
    margin-bottom: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #UFO-fly-2 .col-lg-5 {
    padding-left: 22%;
    padding-right: 15%;
  }
  #UFO-fly-2 .row img:last-child {
    width: 40%;
    right: 55%;
  }
  #UFO-fly-2 p {
    font-size: calc(13 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    line-height: 1.1;
  }
  #UFO-fly-2 .ufo {
    transform: translate(-55vw, -40vh) scale(0.5);
  }
  #UFO-fly-2 .UFO > *:first-child {
    width: calc(1000 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    min-width: calc(1000 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    right: -30%;
    bottom: 140%;
  }
  #trade {
    align-items: flex-end;
    padding-bottom: 6vh;
  }
  #trade .container {
    max-width: 100%;
    padding: 0;
  }
  #trade .card {
    padding: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #trade p {
    padding-left: 0%;
    padding-right: 0%;
  }
  #trade h4 {
    display: none;
  }
  #trade .mascot-1 {
    left: -1%;
    bottom: 12%;
    width: calc(210 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    z-index: 1;
  }
  #trade .mascot-2 {
    right: -20%;
    bottom: -3%;
    width: calc(420 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    transform: scaleX(-1);
  }
  #trade .chest {
    display: none;
  }
  #trade .btn {
    padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #diamond-dust h2, #ether-crystals h2 {
    font-size: calc(23 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #ether-crystals p {
    font-size: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #diamond-dust, #ether-crystals {
    padding-bottom: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
  }
  #ether-crystals {
    top: calc(-60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
  }
  #trade .close {
    top: calc(-80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .container {
    max-width: 93%;
    margin-top: -5vh;
    z-index: 11;
  }
  #guild .card {
    position: absolute;
    bottom: 9vh;
    left: 0;
    width: 100vw;
    z-index: 9;
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .row {
    flex-direction: column;
    gap: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    position: absolute;
    top: 0;
    right: 0;
  }
  #guild .info-box {
    width: calc(190 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .info-box > p {
    padding: calc(6 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild h2 {
    margin-bottom: calc(11 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .description {
    left: 0;
    bottom: -62vh;
    width: calc(100vw - calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .list .item h4 {
    font-size: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .description .close {
    right: 0;
    top: calc(-85 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #guild .mascot-1 {
    width: calc(180 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    left: 0%;
    bottom: 9%;
    z-index: 1;
  }
  #guild .mascot-2 {
    display: none;
  }
  #guild .mascot-3 {
    display: none;
  }
  #guild .mascot-4 {
    width: calc(260 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    left: 2%;
    bottom: 7%;
  }
  #guild:has(.description.active) .mascot-1 {
    left: 3%;
    bottom: 24%;
  }
  #guild:has(.description.active) .mascot-4 {
    left: 40%;
    bottom: 7%;
  }
  #guild .full-description {
    left: -4%;
    top: 0vh;
  }
  .close-guild {
    left: 80%;
    top: -8vh;
    width: calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #three-tails.loaded .row > div:first-child .card-comic {
    order: -1;
    width: 80%;
    font-size: calc(13 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #three-tails .row > div:first-child .card {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #three-tails .row > div:last-child .card p {
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #three-tails .row > div:last-child .card {
    padding: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    background-image: none !important;
    background-color: rgba(156, 160, 141, 0.75);
    -webkit-backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
            backdrop-filter: blur(calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)));
    -webkit-mask: none;
            mask: none;
    margin-top: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #three-tails .row > div:last-child .card h2 {
    text-align: center;
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost .card:first-child {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(30 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost .card:last-child p {
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost .card:last-child {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost .container {
    margin-top: 40vh;
    padding-left: 3%;
    padding-right: 3%;
  }
  #UFO-fly-3 .ufo img:last-child {
    position: absolute;
    width: calc(480 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    right: calc(-130 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    top: -75%;
  }
  #outpost-features .card {
    display: none;
  }
  #outpost-features .row .info-box {
    width: 50%;
  }
  #outpost-features .row {
    row-gap: calc(65 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost-features .description {
    padding: calc(50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) !important;
    width: 95%;
    left: 2.5%;
  }
  #outpost-features .description .close {
    top: calc(-70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    right: 0;
    width: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #outpost-features .row .info-box.open:nth-child(1) {
    transform: translate(9%, 0%);
  }
  #outpost-features .row .info-box.open:nth-child(2) {
    transform: translate(-96%, 0%);
  }
  #outpost-features .row .info-box.open:nth-child(3) {
    transform: translate(0%, -160%);
  }
  #outpost-features .row .info-box.open:nth-child(4) {
    transform: translate(-96%, -150%);
  }
  #outpost-features .description h4 {
    font-size: var(--h4) !important;
  }
  #outpost-features .info-box.open, #outpost-features .info-box.open-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #roadmap {
    padding-top: 0;
  }
  #roadmap .tabs {
    display: flex;
    flex-direction: column;
    gap: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding-top: 18vh;
  }
  .tab {
    padding: calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    min-width: auto;
    width: 75%;
  }
  .tab p {
    font-size: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding: calc(4 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .roadmap-item {
    padding: calc(70 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(40 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-top: 0;
    background-size: 100% 100%;
    min-height: calc(250 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .roadmap-item img {
    display: none;
  }
  .roadmap-item p {
    font-size: calc(16 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    max-width: 80%;
  }
  .roadmap-item h2 {
    font-size: calc(20 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .roadmap-item h3 {
    font-size: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-top: calc(5 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .roadmap-item .category p {
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .roadmap-item .category {
    min-width: calc(220 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding: calc(7 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    display: flex;
    justify-content: center;
    left: 2%;
  }
  .video-review {
    width: 100%;
    padding: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-bottom: calc(100 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #reviews .mascot {
    display: none;
  }
  #partners .row:first-child p {
    width: 47%;
    font-size: calc(12 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    padding: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width)) calc(10 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #partners .row:first-child {
    row-gap: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #partners .row:first-child p:nth-child(1), #partners .row:first-child p:nth-child(2), #partners .row:first-child p:nth-child(3), #partners .row:first-child p:nth-child(4) {
    transform: none;
  }
  #partners .row img {
    top: calc(-50 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    right: 0%;
    width: calc(360 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #partners .row:last-child {
    margin-top: calc(60 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #partners .row:last-child a {
    font-size: calc(14 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .sidebar {
    display: none;
  }
  #about-page h1 {
    font-size: calc(35 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    margin-top: calc(80 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  #about-page h2 {
    margin-bottom: calc(15 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
    font-size: calc(25 * clamp(350px, 100vw, 3850px) / var(--ideal-viewport-width));
  }
  .navbar {
    display: none;
  }
  .pagination {
    display: flex;
  }
}/*# sourceMappingURL=style.css.map */