@font-face {
  font-family: __Sora_cb8dfc;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/c9f47950d1a1fd4d-s.woff2") format("woff2");
  unicode-range: U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff,
    U+2020, U+20a0-20ab, U+20ad-20cf, U+2113, U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
  font-family: __Sora_cb8dfc;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/e409345220cc128b-s.p.woff2") format("woff2");
  unicode-range: U+00??, 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;
}
@font-face {
  font-family: __Sora_Fallback_cb8dfc;
  src: local("Arial");
  ascent-override: 85.29%;
  descent-override: 25.5%;
  line-gap-override: 0%;
  size-adjust: 113.73%;
}
.__className_cb8dfc {
  font-family: __Sora_cb8dfc, __Sora_Fallback_cb8dfc;
  font-style: normal;
}
:root {
  --text: #fff;
  --background: #07070a;
  --primary-button: #c840ed;
  --primary-sub: #940dff;
  --secondary-button: #373c49;
  --accent: #27fcbc;
  --accent-rgb-values: 39, 252, 188;
  --gold-primary: #dfbd69;
  --gold-secondary: #926f34;
}
body,
html {
  width: 100vw !important;
  overflow: hidden !important;
  background-color: var(--background);
  margin: 0;
  color: var(--text);
  height: 100vh !important;
  position: relative;
}
main {
  height: 80vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-x: hidden !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
}
h1 {
  font-size: 3.25rem;
  margin: 0;
  padding: 0;
  z-index: 10;
  width: -moz-fit-content;
  width: fit-content;
}
h1:before {
  content: "";
  width: 100%;
  height: 0.125rem;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--gold-primary) 0,
    var(--gold-secondary) 100%
  );
}
p {
  font-size: 1.25rem;
  z-index: 1;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 10;
}
.circle-deco {
  background-color: var(--background);
  border-radius: 9999px;
  width: 100%;
  height: 100%;
  position: relative;
}
.deco-wrap-color-1,
.deco-wrap-color-2 {
  --gradient-direction: 90deg;
  padding: 2px;
  position: absolute;
  bottom: -450px;
  right: -250px;
  background: linear-gradient(
    var(--gradient-direction),
    var(--primary-button) 0,
    var(--accent) 100%
  );
  width: 750px;
  height: 750px;
  border-radius: 9999px;
  z-index: 5;
}
.deco-wrap-color-2 {
  --gradient-direction: -45deg;
  right: 100px;
  top: -75px;
  width: 150px;
  height: 150px;
}
.deco-wrap-gray-1,
.deco-wrap-gray-2,
.deco-wrap-gray-3 {
  position: absolute;
  border: 1px solid var(--secondary-button);
  border-radius: 9999px;
  z-index: 6;
}
.deco-wrap-gray-1 {
  bottom: -450px;
  right: -15px;
  width: 750px;
  height: 750px;
}
.deco-wrap-gray-2 {
  top: 150px;
  left: 30%;
  width: 300px;
  height: 300px;
}
.deco-wrap-gray-3 {
  right: calc(85% + 100px);
  bottom: -75px;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
}
.cube-deco-1,
.cube-deco-1:after,
.cube-deco-1:before {
  background-color: var(--secondary-button);
  position: absolute;
  display: block;
}
.cube-deco-1:after,
.cube-deco-1:before,
.cube-deco-2:after,
.cube-deco-2:before,
.cube-deco-3 {
  content: "";
  position: absolute;
  background-color: var(--secondary-button);
  display: block;
  z-index: 14;
}
.cube-deco-1 {
  background-image: linear-gradient(
    90deg,
    var(--gold-primary) 0,
    var(--gold-secondary) 100%
  );
  top: 1rem;
  left: 2.5rem;
  width: 8.25rem;
  height: 1rem;
  z-index: 15;
}
.cube-deco-1:before {
  content: "";
  top: 0.5rem;
  left: -1.5rem;
  height: 1px;
  width: 1.5rem;
}
.cube-deco-1:after {
  top: 0.5rem;
  left: -1.5rem;
  height: 6rem;
  width: 1px;
}
.cube-deco-3 {
  top: 1.5rem;
  left: 10.5rem;
  height: 1px;
  width: 5.5rem;
}
.cube-deco-2 {
  background-image: linear-gradient(
    90deg,
    var(--gold-primary) 0,
    var(--gold-secondary) 100%
  );
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  z-index: 15;
  color: #000;
  font-weight: 500;
}
#noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  display: block;
}
@media (max-width: 940px) {
  .deco-wrap-gray-3 {
    display: none;
  }
}
@media (max-width: 640px) {
  .deco-wrap-gray-2 {
    display: none;
  }
}
@media (max-width: 477px) {
  .cube-deco-2 {
    bottom: 0;
    right: 0;
    margin: 1rem;
    width: calc(100vw - 4rem);
  }
  h1:before {
    width: 280px;
    left: 50%;
    transform: translateX(-50%);
  }
}