/* ################################## */
            /*Responsive*/
/* ################################## */
@import url(responsive.css);
/* ################################## */
            /*Responsive*/
/* ################################## */
/* ################################## */
            /*Fonts*/
/* ################################## */
@import url(fonts.css);
/* ################################## */
            /*Fonts*/
/* ################################## */

/* DEFAULT */
*,*::after,*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
a {
    text-decoration: none !important;
}
ul {
    list-style: none !important;
}
/* DEFAULT */
/* SCROLLBAR */
::-webkit-scrollbar {
    display: none;
}
html {
    background-color: #0D0D0D;
}
/* SCROLLBAR */

/* MAIN */
.main {
    position: relative;
    width: 100%;
    height: fit-content;
    overflow-x: hidden;
}
/* MAIN */

/* Particles */
.particle-1 {
    position: absolute;
    top: -6%;
    left: -6%;
    transform: translate(6%, 6%);
    width: clamp(23.5625rem,30vw,34.375rem);
    height: clamp(23.5625rem,30vw,34.375rem);
    border-radius: 34.375rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
}
.particle-4 {
    position: absolute;
    top: -6%;
    left: -6%;
    transform: translate(6%, 6%);
    width: clamp(23.5625rem,30vw,34.375rem);
    height: clamp(23.5625rem,30vw,34.375rem);
    border-radius: 34.375rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
    z-index: 10;
    opacity: 0;
}
.particle-2 {
    position: absolute;
    bottom: -6%;
    right: -6%;
    transform: translate(6%, 6%);
    width: clamp(25.6875rem,32vw,39.5rem);
    height: clamp(25.6875rem,32vw,39.5rem);
    border-radius: 39.5rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
}
.particle-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 120.99894rem;
    background: rgba(7, 206, 2, 0.07);
    filter: blur(75px);
}
/* Particles */

/* Interface View */
.withInterface {
    /* display: none; */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('/media/backgrounds/bg-interface.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* filter: brightness(.1); */
    z-index: 10;
}
/* Interface View */

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/media/backgrounds/bg-grids.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-render {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-35%);
    width: clamp(27.99681rem,70vw,90rem);
    height: clamp(27.99681rem,70vw,90rem);
    background-image: url('/media/img/backRender.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 60% 60%;
    z-index: 6;
}
.hero-render img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
.hero-text {
    position: absolute;
    top: 50%;
    left: clamp(5rem,9.5vw,10rem);
    transform: translateY(-40%);
    z-index: 11;
}
.hero-title .text-off {
    color: rgba(0, 0, 0, 0.13);
    text-shadow: -1px -1px 3px #00000021;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(4.25rem,6.5vw,8.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.hero-title .text-on {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(4.25rem,6.5vw,8.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.hero-title span.margin-left {
    height: fit-content;
    margin-left: clamp(-1.5rem,2vw,-3rem);
}
.points {
    position: relative;
}
.hero-img {
    width: clamp(2.5rem,3vw,5rem);
    height: clamp(0.154rem,0.25vw,0.375rem);
    position: absolute;
    top: clamp(.25rem,.4vw,0.5rem);
    left: clamp(1.25rem,2.3vw,2.5rem);
}
.hero-btns {
    position: absolute;
    bottom: clamp(-4.5rem,-6vw,-7.5rem);
    left: clamp(.3rem,.5vw,.7rem);
    transform: translateX(0%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-btns a img {
    width: clamp(1.5rem,1.8vw,2.03844rem);
    height: clamp(1.5rem,1.8vw,2.03844rem);
    object-fit: contain;
}
/* .hero-btns p {
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,.9vw,1rem);
    z-index: 12;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
} */
.left-btn {
    width: clamp(13.5rem,18vw,20.65625rem);
    height: clamp(2.25rem,3.8vw,4.14019rem);
    background-image: url(/media/icons/hero-btn-1.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    cursor: pointer;
    margin-right: clamp(-1.5rem,-3.1vw,-3.6rem);
    padding-right: clamp(.5rem,.75vw,1rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,.9vw,1rem);
    z-index: 12;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-wrap: nowrap;
}
.right-btn {
    width: clamp(8.5rem,13vw,15.53125rem);
    height: clamp(2.25rem,3.6vw,4.14019rem);
    background-image: url(/media/icons/hero-btn-2.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    cursor: pointer;
    margin-left: clamp(-1.5rem,-3.1vw,-3.6rem);
    margin-bottom: clamp(.25rem,.3vw,.5rem);
    padding-left: clamp(1.5rem,2vw,3rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,.9vw,1rem);
    z-index: 12;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-wrap: nowrap;
}
.line-hero {
    opacity: 0;
    visibility: hidden;
    width: 3.025rem;
    height: 5.6875rem;
    margin-top: clamp(-1.1rem,-1.7vw,-2.4rem);
}
/* Hero Section */
/* Community Section */
.community-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.textbox {
    width: clamp(3.6875rem,6.5vw,7.125rem);
    height: clamp(3.125rem,5.5vw,6rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-200%);
}
.whitelist {
    position: fixed;
    top: clamp(2.5rem,4vw,5rem);
    right: 5%;
    transform: translateX(-5%);
    width: clamp(12rem,14vw,16.71481rem);
    height: clamp(2.2rem,2.5vw,2.9375rem);
    background-image: url(/media/icons/whitelist-btn.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,.7vw,.8rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    text-wrap: nowrap;
    z-index: 11;
}
.whitelist img {
    width: clamp(1rem,1.2vw,1.375rem);
    height: clamp(1rem,1.2vw,1.375rem);
    object-fit: contain;
}
.community-aside {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem,3vw,4rem);
    margin-right: clamp(1.5rem,2.25vw,3rem);
}
.community-text {
    position: absolute;
    top: 26%;
    right: 8%;
    transform: translateX(-8%);
    transform: translateY(-26%);
    width: clamp(23rem,34vw,46rem);
    height: clamp(10rem,15vw,20rem);
    background-image: url(/media/img/text-interface.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: clamp(1.5rem,2vw,3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(.4rem,.6vw,.8rem);
    z-index: 11;
}
.community-text h2 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(1rem,1.2vw,1.375rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: .3rem;
    padding-top: .5rem;
}
.community-text p {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.8);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.6rem,.75vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-left: .3rem;
}
.community-phrase {
    position: absolute;
    bottom: 17%;
    right: 20%;
    transform: translateX(-20%);
    transform: translateY(-17%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.4rem,.6vw,.8rem);
    text-wrap: nowrap;
    z-index: 10;
}
.community-phrase .text-on {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.8);
    font-family: "SpaceGames";
    font-size: clamp(1.8rem,2.6vw,3.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.community-phrase .text-off {
    color: rgba(0, 0, 0, 0.13);
    text-shadow: 0px 0px 3px #00000021;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.4rem,1.9vw,2.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 85%;
    padding-left: 30%;
}
/* Community Section */
/* Take Over Section */
.take-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reveal-text {
    width: 60vw;
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.95rem,4vw,5.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}
.take-section span {
    opacity: .1;
}

/* Take Over Section */
/* Collection Section */
.collection-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(4rem,7vw,8rem);
}
.collection-text {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: clamp(1.5rem,2vw,3rem);
}
.collection-text h2 {
    width: 50%;
    color: #000;
    font-family: "SpaceGames";
    font-size: clamp(1.5rem,2vw,2.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.nft-text {
    width: 38%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.nft-li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.3rem,.45vw,.6rem);
}
.nft-li h3 {
    color: #000;
    font-family: "SpaceGames";
    font-size: clamp(.65rem,.7vw,.75rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.nft-p {
    color: #000;
    font-family: "SpaceMono-Regular";
    font-size: clamp(.8rem,.9vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-top: clamp(.5rem,1vw,1.5rem);
}
.nft-p b {
    color: #000;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Bold";
    font-size: clamp(.8rem,.9vw,1rem);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
}
.nft-gallery {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(8.25rem,13.8vw,23.5625rem);
    position: relative;
}
.gallery-item-left {
    width: clamp(4.54256rem,13vw,13.01819rem);
    height: clamp(4.80694rem,13.2vw,13.72881rem);
    position: absolute;
    left: 77%;
    transition: all 1s ease-in-out;
    z-index: 0;
    opacity: 0;
}
.gallery-item-left-1 {
    left: 7%;
    opacity: 0;
    transform: translateX(-50%);
    z-index: 1;
}
.gallery-item-left-2 {
    width: clamp(5.58913rem,15.5vw,16.01744rem);
    height: clamp(5.92481rem,16vw,16.92156rem);
    left: 25%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 2;
}
.gallery-item-left-3 {
    width: clamp(6.79156rem,18.5vw,19.46344rem);
    height: clamp(7.22156rem,19vw,20.62519rem);
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 3;
}
.gallery-item-left-4 {
    width: clamp(7.68225rem,21vw,22.016rem);
    height: clamp(8.25rem,22vw,23.5625rem);
    left: 77%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 5;
}
.gallery-item-right {
    width: clamp(4.54256rem,13vw,13.01819rem);
    height: clamp(4.80694rem,13.2vw,13.72881rem);
    position: absolute;
    right: 77%;
    transition: all 1s ease-in-out;
    z-index: 0;
    opacity: 0;
}
.gallery-item-right-1 {
    right: 7%;
    opacity: 0;
    transform: translateX(50%);
    z-index: 1;
}
.gallery-item-right-2 {
    width: clamp(5.58913rem,15.5vw,16.01744rem);
    height: clamp(5.92481rem,16vw,16.92156rem);
    right: 30%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 2;
}
.gallery-item-right-3 {
    width: clamp(6.79156rem,18.5vw,19.46344rem);
    height: clamp(7.22156rem,19vw,20.62519rem);
    right: 50%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 3;
}
.gallery-item-right-4 {
    width: clamp(7.68225rem,21vw,22.016rem);
    height: clamp(8.25rem,22vw,23.5625rem);
    right: 77%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 4;
}
.pre-green-cube {
    opacity: 0;
    position: absolute;
    left: 48%;
    top: 49%;
    width: 4.375rem;
    height: 4.375rem;
    background-color: #07CE02;
    z-index: -2;
}
.green-cube {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) !important;
    width: 4.375rem;
    height: 4.375rem;
    background-color: #07CE02;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
/* Collection Section */
/* Group Section */
.group-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #07CE02;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.particle-3 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(17.77381rem,49vw,50.79656rem);
    height: clamp(17.77381rem,49vw,50.79656rem);
    border-radius: 50%;
    background: rgba(7, 206, 2, 0.15);
    filter: blur(85px);
    z-index: 1;
}
.group-blackbox {
    width: 120%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url('/media/backgrounds/blackbox.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
}
.blackbox-inside {
    position: relative;
    width: 75%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 6;
}
.blackbox-inside h3 {
    color: rgba(7, 206, 2, 0.00);
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.5rem,1.8vw,2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}
.blackbox-inside h2 {
    color: #07CE02;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(2rem,3.5vw,4rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    margin-top: clamp(.9rem,1.4vw,1.7rem);
    margin-bottom: clamp(1rem,1.5vw,2rem);
}
.group-spots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.3rem,.5vw,.6rem);
    z-index: 7;
}
.group-spot-single {
    width: fit-content;
    height: fit-content;
}
.group-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.group-name h4 {
    color: #07CE02;
    text-align: center;
    font-family: "SpaceGames";
    font-size: clamp(.7rem,.8vw,.9rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.group-container {
    width: clamp(12.73713rem,16vw,21.26538rem);
    height: clamp(12.73713rem,16vw,21.26538rem);
}
.group-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Group Section */
/* Legendaries Section */
.legendaries-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem,2.8vw,3rem);
}
.duo {
    width: clamp(10.24025rem,19vw,20.76856rem);
    height: clamp(9.6275rem,18vw,19.40613rem);
    position: absolute;
    bottom: 0;
    opacity: .35;
}
.fireboy {
    right: 10%;
    transform: translateX(-10%);
    z-index: 1;
    mask-image: linear-gradient(black 80%, transparent);
}
.iceboy {
    right: 0%;
    transform: translateX(-0%);
    z-index: 2;
    mask-image: linear-gradient(black 80%, transparent);
}
.legendary-left {
    position: relative;
    width: 55%;
    height: 100%;
    overflow-y: hidden;
    z-index: 5 !important;
}
.legendary-left img:first-child {
    width: clamp(25.52106rem,50vw,66.34431rem);
    height: clamp(25.54169rem,50.5vw,66.39863rem);
    mask-image: linear-gradient(black 60%, transparent);
}
.legendary-left img:last-child {
    width: clamp(25.25238rem,50vw,63.65113rem);
    height: clamp(25.27306rem,50.2vw,63.70638rem);
    position: absolute;
    left: -11%;
    bottom: 0;
    mask-image: linear-gradient(black 90%, transparent);
}
.legendary-right {
    width: 35%;
    height: 80%;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem,3.7vw,4rem);
    margin-top: clamp(5.5rem,9.5vw,10rem);
}
.crystal-ball {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.9rem,1.1vw,1.2rem);
}
.ball {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.ball img:first-child {
    width: clamp(10.3125rem,13.5vw,15.1875rem);
    height: clamp(10.4375rem,13.5vw,15.3125rem);
    margin-right: clamp(7rem,11.6vw,12rem);
}
.crystal-text {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: clamp(4.5rem,8vw,9rem);
}
.crystal-text h4 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.7rem,.7vw,0.75rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}
.absolute-crystal {
    width: clamp(12.375rem,12.5vw,13.0625rem);
    height: 1.6875rem;
    margin-left: clamp(1rem,1.25vw,1.5rem);
    /* position: absolute;
    right: 0; */
}
.absolute-crystal-2 {
    width: clamp(5.5625rem,6.3vw,6.8125rem);
    height: clamp(4.3125rem,5.1vw,5.3125rem);
    position: absolute;
    right: clamp(1.5rem,2.8vw,3rem);
}
.text-right p {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.8rem,.9vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
/* Legendaries Section */
/* Twenty Section */
.twenty-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.twenty-section h2 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #000;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.9rem,5.5vw,5.9375rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
/* Twenty Section */
/* Roulette Section */
.roulette-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.7rem,1.2vw,1.4rem);
}
.roulette {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
}
.roullete-img {
    width: clamp(22.125rem,27vw,32.75rem);
    height: clamp(22.125rem,27vw,32.75rem);
}
.spinner {
    width: clamp(6rem,8.3vw,9.89013rem);
    height: clamp(6.1875rem,8.4vw,10.15531rem);
    position: absolute;
    display: flex;
    align-self: center;
    z-index: 6;
    transition: all .2s ease-in;
}
.powerby {
    width: 14.25rem;
}
.unnamed {
    width: clamp(7.5625rem,8.5vw,9.0625rem);
    height: clamp(5.0625rem,5.5vw,6.1875rem);
}
.parts {
    position: absolute;
    width: clamp(9.125rem,12vw,13.4375rem);
    height: clamp(9.125rem,12vw,13.4375rem);
    opacity: .2;
    z-index: 5;
    transition: all .3s ease;
}
.parts-position-1 {
    top: 8.5%;
    right: 8.5%;
}
.parts-position-2 {
    bottom: 8.5%;
    right: 8.5%;
}
.parts-position-3 {
    bottom: 8.5%;
    left: 8.5%;
}
.parts-position-4 {
    top: 8.5%;
    left: 8.5%;
}
.parts:hover {
    opacity: 1;
}
.parts-position-1:hover + .parts-position-2 + .parts-position-3 + .parts-position-4 + .spinner {
    transform: rotate(45deg);
}
.parts-position-2:hover + .parts-position-3 + .parts-position-4 + .spinner {
    transform: rotate(125deg);
}
.parts-position-3:hover + .parts-position-4 + .spinner {
    transform: rotate(225deg);
}
.parts-position-4:hover + .spinner {
    transform: rotate(310deg);
}
.parts-text-general {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.diamond-1,
.diamond-2,
.diamond-3,
.diamond-4 {
    width: clamp(2rem,3vw,3.25rem);
    height: clamp(2rem,3vw,3.25rem);
    position: absolute;
    transition: all 30s ease-out;
    z-index: 7;
}
.diamond-1 {
    top: 15%;
    right: 11%;
}
.diamond-2 {
    bottom: 15%;
    right: 11%;
}
.diamond-3 {
    bottom: 15%;
    left: 11%;
}
.diamond-4 {
    top: 15%;
    left: 11%;
}

.parts-position-1:hover + .parts-position-2 + .parts-position-3 + .parts-position-4 + .spinner + .parts-text-1 {
    opacity: 1;
    visibility: visible;
}
.parts-position-2:hover + .parts-position-3 + .parts-position-4 + .spinner + .parts-text-1 + .parts-text-2 {
    opacity: 1;
    visibility: visible;
}
.parts-position-3:hover + .parts-position-4 + .spinner + .parts-text-1 + .parts-text-2 + .parts-text-3 {
    opacity: 1;
    visibility: visible;
}
.parts-position-4:hover + .spinner + .parts-text-1 + .parts-text-2 + .parts-text-3 + .parts-text-4 {
    opacity: 1;
    visibility: visible;
}

.parts-position-1:hover + .parts-position-2 + .parts-position-3 + .parts-position-4 + .spinner + .parts-text-1 .diamond-1 {
    transform: rotate(3600deg);
}
.parts-position-2:hover + .parts-position-3 + .parts-position-4 + .spinner + .parts-text-1 + .parts-text-2 .diamond-2 {
    transform: rotate(3600deg);
}
.parts-position-3:hover + .parts-position-4 + .spinner + .parts-text-1 + .parts-text-2 + .parts-text-3 .diamond-3 {
    transform: rotate(3600deg);
}
.parts-position-4:hover + .spinner + .parts-text-1 + .parts-text-2 + .parts-text-3 + .parts-text-4 .diamond-4 {
    transform: rotate(3600deg);
}
.part-text-1,
.part-text-2,
.part-text-3,
.part-text-4 {
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.1875rem,1.3vw,1.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    z-index: 7;
}
.part-text-1 {
    top: 11%;
    right: -43%;
    text-align: start;
}
.part-text-2 {
    bottom: 13%;
    right: -58%;
    text-align: start;
}
.part-text-3 {
    bottom: 16%;
    left: -58%;
    text-align: end;
}
.part-text-4 {
    top: 11%;
    left: -75%;
    text-align: end;
}
/* Roulette Section */
/* Roadmap Section */
.roadmap-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.roadmap-section h2 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #07CE02;
    text-align: center;
    text-shadow: 0px 0px 50px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(2.3rem,3.2vw,3.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.roadmap {
    position: relative;
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    z-index: 11;
}
.line-path {
    width: 100%;
    z-index: 11;
}
.roadmap-steps {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.roadmap-text {
    position: absolute;
    text-align: center;
    opacity: 0;
}
.roadmap-text h3 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.8rem,.9vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: .3rem;
}
.roadmap-text p {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.85rem,1vw,1.0625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.roadmap-1 img {
    margin-bottom: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.roadmap-2 img {
    margin-top: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.roadmap-3 img {
    margin-bottom: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.roadmap-4 img {
    margin-top: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.roadmap-5 img {
    margin-bottom: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.roadmap-6 img {
    margin-top: clamp(1rem,1.4vw,1.5rem);
    z-index: 13;
}
.line-fill {
    /* width: clamp(11rem,15vw,16.625rem); */
    width: 15%;
    height: 0.9rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
}
.roadmap-1 {
    top: 78%;
    left: 9.2%;
    /* transform: translate(-9%,-78%); */
    transform: translateY(-78%);
    opacity: 1;
    z-index: 13;
}
.roadmap-2 {
    top: 31%;
    left: 23.7%;
    /* transform: translate(-25%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
.roadmap-3 {
    top: 72%;
    left: 38.1%;
    /* transform: translate(-41%,-72%); */
    transform: translateY(-72%);
    opacity: 1;
    z-index: 13;
}
.roadmap-4 {
    top: 31%;
    left: 52.15%;
    /* transform: translate(-57%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
.roadmap-5 {
    top: 72.5%;
    left: 65.2%;
    /* transform: translate(-75%,-72.5%); */
    transform: translateY(-72.5%);
    opacity: 1;
    z-index: 13;
}
.roadmap-6 {
    top: 31%;
    left: 82.7%;
    /* transform: translate(-89%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
/* Roadmap Section */
/* Thanks Section */
.thanks-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.75rem,1vw,1.5rem);
}
.thanks-section h2 {
    color: #07CE02;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(2.5rem,3.2vw,3.9375rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}
.thanks-imgs {
    position: relative;
    width: 80%;
    height: clamp(9.25rem,21vw,29.875rem);
}
.thanks-imgs .snake-1 {
    width: clamp(6.8125rem,16vw,21.875rem);
    height: clamp(6.625rem,16vw,21.875rem);
    position: absolute;
    top: 20%;
    left: 30%;
    transform: rotateX(20deg) rotateY(60deg) rotateZ(-45deg);
}
.thanks-imgs .snake-2 {
    width: clamp(9.3125rem,21vw,29.875rem);
    height: clamp(9.25rem,21vw,29.875rem);
    position: absolute;
    top: 10%;
    left: 45%;
    transform: rotateY(15deg) rotateZ(45deg);
}
.snake1-img {
    width: 100%;
    height: 100%;
}
.snake2-img {
    width: 100%;
    height: 100%;
}
.fotf {
    width: clamp(13.3125rem,24vw,33.875rem);
    height: clamp(13.25rem,24vw,33.875rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) !important;
    background-color: #000;
    border-radius: 50%;
    z-index: 20;
    opacity: 0;
}
.fotf-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: clamp(1.6vw,2.35vw,3.1rem);
}
.char {
    position: absolute;
    color: #07CE02;
    font-family: "SpaceGames";
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
}
.char-1 {
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
}
.char-2 {
    top: 50%;
    left: 35%;
    transform: translateY(-50%);
}
.char-3 {
    top: 50%;
    left: 55%;
    transform: translateY(-50%);
}
.char-4 {
    top: 50%;
    left: 75%;
    transform: translateY(-50%);
}
/* Thanks Section */
/* Footer Section */
.footer-section {
    position: absolute;
    width: 100%;
    height: 100vh;
    opacity: 0;
}
.footer-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.topLoop {
    width: 100%;
    height: clamp(11.75rem,14.5vw,18.5rem);
    overflow: hidden;
    margin-top: clamp(2rem,5vw,6rem);
}
.track-1 {
    display: flex;
    animation: scroll 50s linear infinite alternate;
    width: calc(clamp(13.92706rem,15vw,18.5rem) * 24);
    opacity: 0.15;
    mix-blend-mode: luminosity;
}
.top-slide {
    width: clamp(11.92706rem,14.5vw,18.5rem);
    height: clamp(11.75rem,14.5vw,18.5rem);
}
.top-slide img {
    width: 100%;
    height: 100%;
}
.botLoop {
    width: 100%;
    height: clamp(13.75rem,16.5vw,20.5rem);
    overflow: hidden;
}
.track-2 {
    display: flex;
    animation: scroll-2 50s linear infinite alternate-reverse;
    width: calc(clamp(15.75rem,17vw,20.5rem) * 24);
    opacity: 0.15;
    mix-blend-mode: luminosity;
}
.bot-slide {
    width: clamp(13.92706rem,16.5vw,20.5rem);
    height: clamp(13.75rem,16.5vw,20.5rem);
}
.bot-slide img {
    width: 100%;
    height: 100%;
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(clamp(-13.92706rem,-17vw,-18.5rem) * 12));
    }
}
@keyframes scroll-2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(clamp(-15.92706rem,-15vw,-20.5rem) * 12));
    }
}
.footer {
    display: flex;
    justify-content: space-between;
    width: 95%;
    position: absolute;
    bottom: clamp(1rem,1.5vw,2rem);
    z-index: 21 !important;
}
.internals {
    display: flex;
    gap: clamp(1.5rem,2.5rem,3rem);
}
.internals-a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}
.internals-a a {
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-decoration-line: underline !important;
    text-wrap: nowrap;
    cursor: pointer;
    transition: color .5s ease;
}
.internals-a a:hover {
    color: #5cca5a;
}
.social svg {
    transition: fill .5s ease;
}
.social svg:hover {
    fill: #5cca5a;
}
/* Footer Section */
/* Legal Pages */
.legal {
    position: relative;
    margin: 0 auto;
    width: clamp(60%,80vw,80%);
    margin-top: clamp(7.5rem,9vw,10rem);
    margin-bottom: clamp(7.5rem,9vw,10rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem,1.5vw,2rem);
    z-index: 12;
}
.legal h1 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(1.2rem,3vw,3.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.legal h2 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(1rem,1.8vw,2.1875rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; 
}
.legal p, 
.legal li,
.legal h3 {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.9rem,.95vw,1.0625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    list-style: outside !important;
}
.legal a {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.9rem,.95vw,1.0625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
}
.legal ul {
    margin-left: clamp(.5rem,1vw,1.5rem);
}
.legal p {
    margin-bottom: clamp(1rem,1.5vw,2rem);
}
/* Legal Pages */

/* Animation Glitch */
/* .discord, .world-btn, .access-btn, .at-btn {
    transition: 0.5s ease-in;
} */

.discord, .discord::after, .world-btn, .world-btn::after {
    position: relative;
    outline: transparent;
}
.at-btn, .at-btn::after, .access-btn, .access-btn::after {
    outline: transparent;
}
.discord::after{
    content: 'JOIN OUR DISCORD faf';
}
.world-btn::after{
    content: 'ENTER WL faf';
}
.at-btn::after, .access-btn::after{
    content: 'ACCESS WHITELIST faf';
}
.at-btn::after, .access-btn::after{
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, black 3%, black 5%, #07CE02 5%);
    text-shadow: -3px -3px 0 white, 3px 3px 0 black;
    clip-path: var(--slice-0);
}
.discord::after , .world-btn::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(50% -6px 0 0);
    --slice-2: inset(20% -6px 30% 0);
    --slice-3: inset(5% -6px 85% 0);
    --slice-4: inset(10% -6px 43% 0);
    --slice-5: inset(50% -6px 5% 0);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, black 3%, black 5%, #07CE02 5%);
    text-shadow: -3px -3px 0 white, 3px 3px 0 black;
    clip-path: var(--slice-0);
}
.discord:hover::after, .world-btn:hover::after, .at-btn:hover::after, .access-btn:hover::after {
    animation: glitch 1s steps(2, end);
}
@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }
    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }
    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }
    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }
    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }
    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }
    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }
    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }
    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }
    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }
    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

.mc-2{
    animation: opacity-2 2s linear infinite;
}
.mc-3{
    animation: opacity-3 2s linear infinite;
}

@keyframes opacity-2 {
    0%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes opacity-3 {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
}

.animated-title {
    animation: textGlitch 3s ease-in-out infinite alternate;
}

.animated-span {
    animation: textGlitch 3.1s ease-in-out infinite alternate;
}

@keyframes textGlitch {
    0% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
        95% {
        opacity: 0.1;
    }
    96% {
        opacity: 1;
    }
    97% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: transparent;
    overflow: hidden;
}
.loader-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader-vector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/media/backgrounds/LoadingVector.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    z-index: 1003;
}
.loader {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1002;
}
/* .loading-vid {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */
.loader-left {
    width: 50vw;
    height: 100%;
    background-color: #000;
    position: absolute;
    z-index: 1001;
    left: 0;
}
.loader-right {
    width: 50vw;
    height: 100%;
    background-color: #000;
    position: absolute;
    z-index: 1001;
    right: 0;
}
.loader-line-1 {
    width: clamp(16rem,22vw,26.375rem);
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 1002;
}
.loader-line-2 {
    width: clamp(16rem,22vw,26.375rem);
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    z-index: 1002;
}
.loader-light {
    width: clamp(21rem,32vw,41.75rem);
    height: clamp(21rem,32vw,41.75rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1004;
    animation: lightExpand 3s ease infinite;
}

@keyframes lightExpand {
    0%{
        width: clamp(21rem,32vw,41.75rem);
        height: clamp(21rem,32vw,41.75rem);
    }
    25%{
        width: clamp(26rem,37vw,46.75rem);
        height: clamp(26rem,37vw,46.75rem);
    }
    100%{
        width: clamp(21rem,32vw,41.75rem);
        height: clamp(21rem,32vw,41.75rem);
    }
}

.loader-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(18.5rem,23vw,27.625rem);
    height: clamp(18.5rem,23vw,27.625rem);
    border-radius: 27.625rem;
    box-shadow: 0px 4px 0px 0px rgba(7, 206, 2, 0.50), 0px -4px 0px 0px rgba(7, 206, 2, 0.50);
    z-index: 1004;
}
.loader-progressBar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(15.6rem,20.5vw,24.825rem);
    height: clamp(15.6rem,20.5vw,24.825rem);
    border-radius: 27.625rem;
    background: conic-gradient(#07CE02 1deg, transparent 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1004;
}
.loader-progressBar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 27.625rem;
    width: clamp(11rem,16vw,20rem);
    height: clamp(11rem,16vw,20rem);
    background: #000;
    z-index: 1003;
}
.loader-text {
    color: #07CE02;
    text-align: center;
    font-family: "SpaceGames";
    font-size: clamp(3.2rem,4.2vw,5.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    padding-top: .5%;
    padding-right: .5%;
    z-index: 1005;
}