/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,
legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

.fixed {
    position: fixed
}

.grow {
    flex-grow: 1
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.resize {
    resize: both
}

.outline {
    outline-style: solid
}

.blur {
    --tw-blur: blur(8px)
}

.blur,
.drop-shadow {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06))
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.loaderSection {
    position: absolute;
    z-index: 50;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(7 17 35/var(--tw-bg-opacity))
}

.loaderSection .backgroundSidebars svg .backgroundsidebars_svg__fill {
    fill: #001e43;
    stroke: #318dff
}

.loaderSection .backgroundSidebars .backgroundSidebars_left {
    position: absolute;
    top: -.5vh;
    z-index: 10;
    max-height: 100vh;
    left: -2px
}

.loaderSection .backgroundSidebars .backgroundSidebars_left svg {
    height: 101vh;
    width: 100%
}

.loaderSection .backgroundSidebars .backgroundSidebars_right {
    position: absolute;
    top: -.5vh;
    z-index: 10;
    max-height: 100vh;
    right: -2px;
    transform: scaleX(-1)
}

.loaderSection .backgroundSidebars .backgroundSidebars_right svg {
    height: 101vh;
    width: 100%
}

.loaderSection .backgroundSidebars .backgroundSidebars_top {
    position: absolute;
    z-index: 40;
    max-height: 100vh;
    width: 100%;
    top: -50.3%;
    align-self: flex-end;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(90deg)
}

.loaderSection .backgroundSidebars .backgroundSidebars_top svg {
    max-height: 100vh;
    width: 100%
}

.loaderSection_content {
    display: flex;
    flex-direction: column;
    align-items: center
}

.loaderSection_content>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(8rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(8rem * var(--tw-space-y-reverse))
}

.loaderSection_content__logo {
    width: 20%
}

.loaderSection_content__logo video {
    width: 100% !important;
    height: auto !important
}

@media(max-width:799px) {
    .loaderSection_content__logo {
        width: 50%
    }
}

.loaderSection_content .loaderbar {
    width: 80%
}

@media(max-width:799px) {
    .loaderSection_content .loaderbar {
        position: relative;
        height: 15vh
    }
}

.loaderSection_content .loaderbar__text {
    width: -moz-fit-content;
    width: fit-content;
    padding-left: .5rem;
    padding-right: .5rem;
    text-transform: uppercase
}

@media(max-width:799px) {
    .loaderSection_content .loaderbar__text {
        font-size: .75rem;
        line-height: 1rem
    }
}

.loaderSection_content .loaderbar__bar svg {
    width: 100%
}

.loaderSection_content .loaderbar__bar svg #loaderbar__bar {
    visibility: hidden
}

@media(max-width:799px) {
    .loaderSection_content .loaderbar__bar {
        position: absolute;
        bottom: 1vh;
        width: 100%
    }
}

.globalSection {
    position: absolute;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(16 16 16/var(--tw-bg-opacity))
}
.globalSection {
    background: linear-gradient(145deg, #09080c, #070818 29%, #090e20 43%, #0a1129 57%, #0a1133 71%, #0a1133);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite
}

@media(max-width:599px) {
    .globalSection {
        background: linear-gradient(145deg, #09080c, #070818 29%, #090e20 43%, #0a1129 57%, #0a1133 71%, #0a1133);
        background-size: 400% 400%;
        animation: gradientBG 10s ease infinite
    }
}

.globalSection .backgroundSidebars {
    pointer-events: none
}

.globalSection .backgroundSidebars .backgroundSidebars_left {
    position: absolute;
    top: -.5vh;
    z-index: 40;
    max-height: 100vh;
    left: 0
}

.globalSection .backgroundSidebars .backgroundSidebars_left svg {
    height: 101vh;
    width: 100%
}

.globalSection .backgroundSidebars .backgroundSidebars_right {
    position: absolute;
    top: -.5vh;
    z-index: 40;
    max-height: 100vh;
    right: 0
}

.globalSection .backgroundSidebars .backgroundSidebars_right svg {
    height: 101vh;
    width: 100%
}

.globalSection .backgroundSidebars .backgroundSidebars_top {
    position: absolute;
    z-index: 40;
    max-height: 100vh;
    width: 100%;
    top: -50.3%;
    transform: rotate(90deg)
}

.globalSection .backgroundSidebars .backgroundSidebars_top svg {
    max-height: 100vh;
    width: 100%
}

.globalSection .copyrightText {
    position: absolute;
    left: 1.75rem;
    bottom: .5rem;
    z-index: 30;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    text-transform: uppercase
}

@media (min-width:1024px) {
    .globalSection .copyrightText {
        left: 2.5rem;
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.globalSection .copyrightText {
    color: #3ca7ff;
    transition: all 225ms ease-in-out
}

.globalSection .copyrightText:hover {
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 0 1px #3ca7ff, 0 0 10px #3ca7ff, 0 0 50px #3ca7ff, 0 0 20px #3ca7ff
}

.globalSection .linkText {
    position: absolute;
    right: 1.75rem;
    bottom: .5rem;
    z-index: 30;
    fill: #e4e4e7;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    text-transform: uppercase
}

@media (min-width:1024px) {
    .globalSection .linkText {
        right: 2.5rem;
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.globalSection .linkText {
    color: #3ca7ff;
    transition: all 225ms ease-in-out
}

.globalSection .linkText:hover {
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 0 1px #3ca7ff, 0 0 10px #3ca7ff, 0 0 50px #3ca7ff, 0 0 20px #3ca7ff
}

.globalSection .soundBar {
    position: absolute;
    left: 3%;
    top: 1.5rem;
    z-index: 20;
    min-width: 50px;
    width: 5%
}

.globalSection .soundBar svg {
    width: 100%;
    height: auto
}

.globalSection .soundBar svg .soundbar__hexagon {
    cursor: var(--linkCursor)
}

.globalSection .soundBar svg .soundbar__bar,
.globalSection .soundBar svg .soundbar__mute {
    pointer-events: none
}

.globalSection .navSidebar {
    position: absolute;
    right: 3%;
    top: 0;
    bottom: 0;
    z-index: 30;
    margin: auto;
    display: flex;
    width: 5%;
    flex-direction: column;
    justify-content: center
}

.globalSection .navSidebar>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.globalSection .navSidebar .navSidebarElement {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 7px rgba(49, 142, 255, 0))
}

@media(max-width:799px) {
    .globalSection .navSidebar {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 1.25rem;
        top: auto;
        margin: 0 auto;
        max-height: 5rem;
        width: 40%;
        flex-direction: row
    }

    .globalSection .navSidebar>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        --tw-space-y-reverse: 0;
        margin: calc(0px * calc(1 - var(--tw-space-y-reverse))) calc(2rem * var(--tw-space-x-reverse)) calc(0px * var(--tw-space-y-reverse)) calc(2rem * calc(1 - var(--tw-space-x-reverse)))
    }
}

@media(max-width:449px) {
    .globalSection .navSidebar {
        bottom: 1.5rem;
        width: 60%
    }

    .globalSection .navSidebar>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.25rem * var(--tw-space-x-reverse));
        margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))
    }
}

.globalSection .navSidebar .sideNavIcon {
    position: relative
}

.globalSection .navSidebar .sideNavIcon .navIconSvg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 35%;
    width: 35%;
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 1
}

@media(min-width:801px) {
    .globalSection .navSidebar .navIconSvg {
        height: 1.7vw;
        width: 1.7vw
    }

    .globalSection .navSidebar #sideNavIcon_home .navIconSvg,
    .globalSection .navSidebar #sideNavIcon_person .navIconSvg {
        height: 1.6vw
    }
}

.globalSection .cursor__contianer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    height: 22px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-fit-content;
    width: fit-content
}

@media(max-width:699px) {
    .globalSection .cursor__contianer {
        display: none
    }
}

.globalSection .cursor__contianer svg {
    height: 100%;
    width: 100%;
    filter: drop-shadow(0 0 2.5px rgba(43, 137, 252, .431372549))
}

@media only screen and (max-width:700px) {
    .globalSection .cursor__contianer {
        display: "none"
    }
}

.globalSection .connectWalletButton {
    position: absolute;
    right: 3%;
    top: 2%;
    z-index: 30;
    background-color: #318dff;
    color: #0f1a35;
    cursor: var(--linkCursor);
    border-radius: 8px;
    padding: .8% 12px;
    font-size: max(10px, .9vw);
    transition: all .2s ease-out
}

@media(max-width:799px) {
    .globalSection .connectWalletButton {
        position: absolute;
        right: auto;
        left: auto;
        top: 2rem;
        z-index: 30;
        margin: auto;
        border-radius: 8px;
        left: 50%;
        padding: 10px 12px;
        font-size: 11px;
        transform: translate(-50%)
    }
}

.globalSection #landscape-lock {
    height: 100%;
    width: 100%;
    display: none;
    z-index: 100;
    position: fixed;
    background: linear-gradient(145deg, #09080c, #070818 29%, #090e20 43%, #0a1129 57%, #0a1133 71%, #0a1133);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite
}

.globalSection #landscape-lock svg {
    margin: auto;
    height: 100%;
    width: 50%
}

@media(max-height:450px)and (orientation:landscape) {
    .globalSection #landscape-lock {
        display: block
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

#particleSystem {
    position: absolute;
    z-index: 10
}

#gradient-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    --gradient-color-1: #0a1129;
    --gradient-color-2: #09080c;
    --gradient-color-3: #070818;
    --gradient-color-4: #0a1133
}

.connectWalletButton,
.connectWalletButton-connected {
    position: absolute;
    right: 3%;
    top: 2%;
    z-index: 30;
    background-color: #318dff;
    color: #0f1a35;
    cursor: var(--linkCursor);
    border-radius: 8px !important;
    padding: .7% 12px;
    font-size: max(10px, .9vw);
    transition: all .2s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 1;
    flex-shrink: 0;
    box-shadow: none
}

.connectWalletButton-connected,
.connectWalletButton-connected-connected,
.connectWalletButton-connected:hover,
.connectWalletButton:hover {
    color: #fff
}

@media(max-width:799px) {

    .connectWalletButton,
    .connectWalletButton-connected {
        position: absolute;
        right: auto;
        left: auto;
        top: 2.25rem;
        z-index: 30;
        margin: auto;
        border-radius: 100px;
        left: 50%;
        padding: 10px 12px;
        font-size: 11px;
        transform: translate(-50%)
    }
}

.backButton {
    position: fixed;
    bottom: 0;
    z-index: 10;
    height: 1.5rem
}

.backButton svg {
    width: 100%;
    height: 100%;
    cursor: var(--linkCursor);
    z-index: 10
}

.backButton p {
    z-index: 20;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    font-size: .875rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    opacity: .9
}

@media(max-width:799px) {
    .backButton {
        position: absolute;
        bottom: auto;
        right: 7%;
        top: 1.75rem;
        z-index: 10;
        height: auto;
        width: 8.333333%;
        min-width: 30px;
        max-width: 40px
    }
}

.page404__body {
    margin-top: -5%;
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.page404__body>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(6% * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(6% * var(--tw-space-y-reverse))
}

@media(max-width:799px) {
    .page404__body {
        width: 70%
    }
}

.page404__header {
    width: 100%
}

.page404__header svg {
    height: 100%;
    width: 100%
}

.page404__backButton {
    width: 100%;
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration-line: underline;
    color: #318dff;
    cursor: var(--linkCursor);
    transition: all .2s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media(max-width:799px) {
    .page404__backButton {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

@media(max-width:424px) {
    .page404__backButton {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.page404__backButton:hover {
    color: #fff;
    text-shadow: 0 0 5px #318dff, 0 0 25px #318dff, 0 0 50px #318dff, 0 0 100px #318dff
}

.heroSection {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.heroSection #heroBackgroundImages {
    position: absolute;
    height: 100%;
    width: 100%
}

.heroSection #heroBackgroundImages img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.heroSection .header_navigation {
    position: absolute;
    top: 1.75rem;
    right: 0;
    left: 0;
    z-index: 20;
    margin: auto;
    display: flex;
    width: 33.333333%;
    justify-content: center;
    text-transform: uppercase
}

@media(max-width:799px) {
    .heroSection .header_navigation {
        top: 2.5rem;
        height: -moz-fit-content;
        height: fit-content;
        width: -moz-fit-content;
        width: fit-content;
        left: 50%;
        transform: translate(-50%)
    }
}

.heroSection .header_navigation ul {
    display: flex;
    width: 100%
}

.heroSection .header_navigation ul>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))
}

@media(min-width:801px) {
    .heroSection .header_navigation ul {
        display: flex;
        width: 33.333333%
    }

    .heroSection .header_navigation ul>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(5rem * var(--tw-space-x-reverse));
        margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .heroSection .header_navigation ul :first-child {
        position: absolute;
        left: 0
    }
}

@media(min-width:801px)and (min-width:1367px) {
    .heroSection .header_navigation ul :first-child {
        left: 1vw
    }
}

@media(min-width:801px)and (min-width:1701px) {
    .heroSection .header_navigation ul :first-child {
        left: 2vw
    }
}

@media(min-width:801px) {
    .heroSection .header_navigation ul :nth-child(2) {
        position: absolute;
        left: 6vw
    }
}

@media(min-width:801px)and (min-width:1367px) {
    .heroSection .header_navigation ul :nth-child(2) {
        left: 6.8vw
    }
}

@media(min-width:801px)and (min-width:1701px) {
    .heroSection .header_navigation ul :nth-child(2) {
        left: 7vw
    }
}

@media(min-width:801px) {
    .heroSection .header_navigation ul :nth-child(3) {
        position: absolute;
        left: 17.5vw
    }
}

@media(min-width:801px)and (min-width:1701px) {
    .heroSection .header_navigation ul :nth-child(3) {
        left: 15.7vw
    }
}

.heroSection .header_navigation ul li {
    position: absolute;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: .1rem;
    cursor: var(--linkCursor);
    transition: all .5s ease-out;
    padding: .694vw 2.222vw;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media(max-width:799px) {
    .heroSection .header_navigation ul li {
        position: relative
    }
}

@media(min-width:801px) {
    .heroSection .header_navigation ul li:hover {
        color: #318dff;
        text-shadow: 0 0 5px #318dff, 0 0 25px #318dff, 0 0 50px #318dff, 0 0 100px #318dff
    }

    .heroSection .header_navigation ul li:before {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: .168vw;
        background-color: #318dff;
        transition: width .3s ease-out, transform .3s
    }

    .heroSection .header_navigation ul li:hover:before {
        width: 100%;
        left: 0;
        right: auto
    }
}

.aboutSection {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    background-color: transparent
}

.aboutSection .aboutTiles {
    position: relative;
    z-index: 10;
    display: grid;
    width: 80%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1rem
}

@media(max-width:799px) {
    .aboutSection .aboutTiles {
        margin-top: 20%;
        margin-bottom: 20%;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }
}

.aboutSection .aboutTiles .aboutTile {
    position: relative;
    height: -moz-fit-content;
    height: fit-content
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .aboutTile {
        height: -moz-fit-content;
        height: fit-content;
        width: 100%
    }
}

.aboutSection .aboutTiles .aboutTile__background {
    height: -moz-fit-content;
    height: fit-content;
    width: 100%
}

.aboutSection .aboutTiles .aboutTile__background svg {
    height: 100%;
    width: 100%
}

.aboutSection .aboutTiles .aboutTile__body {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%
}

.aboutSection .aboutTiles .aboutTile__body p {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400
}

@media (min-width:640px) {
    .aboutSection .aboutTiles .aboutTile__body p {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:1536px) {
    .aboutSection .aboutTiles .aboutTile__body p {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .aboutTile__body p {
        font-size: .62rem;
        line-height: .8rem
    }
}

@media(max-width:329px) {
    .aboutSection .aboutTiles .aboutTile__body p {
        font-size: .58rem;
        line-height: .8rem
    }
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .aboutTile__content {
        margin-top: -10px
    }
}

.aboutSection .aboutTiles .aboutTile__header {
    max-height: 4rem;
    width: -moz-fit-content;
    width: fit-content
}

.aboutSection .aboutTiles .aboutTile__header svg {
    height: 100%;
    width: auto
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .aboutTile__header {
        height: 1.75rem
    }
}

@media(max-width:799px)and (min-width:426px) {
    .aboutSection .aboutTiles .aboutTile__header {
        height: 2.5rem
    }
}

@media(max-width:1365px)and (min-width:801px) {
    .aboutSection .aboutTiles .aboutTile__header {
        height: 3.5rem
    }
}

.aboutSection .aboutTiles .aboutTile .tileButton {
    cursor: var(--linkCursor);
    width: 6rem
}

@media (min-width:1024px) {
    .aboutSection .aboutTiles .aboutTile .tileButton {
        width: 6rem
    }
}

@media (min-width:1280px) {
    .aboutSection .aboutTiles .aboutTile .tileButton {
        width: 8rem
    }
}

@media (min-width:1536px) {
    .aboutSection .aboutTiles .aboutTile .tileButton {
        width: 9rem
    }
}

.aboutSection .aboutTiles .aboutTile .tileButton svg {
    height: 100%;
    width: 100%
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .aboutTile .tileButton {
        width: 5rem
    }
}

@media(max-width:329px) {
    .aboutSection .aboutTiles .aboutTile .tileButton {
        width: 4rem
    }
}

.aboutSection .aboutTiles .mintTile {
    grid-column: span 3/span 3;
    grid-row: span 1/span 1;
    align-self: end
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .mintTile {
        grid-column: span 1/span 1
    }
}

.aboutSection .aboutTiles .mintTile__body {
    -webkit-clip-path: polygon(69.5% .5%, 72.2% 5.7%, 88% 5.7%, 90.7% .5%, 96% .5%, 96.5% .8%, 97% 1.4%, 99.2% 6%, 99.55% 7%, 99.7% 8%, 99.7% 96%, 99.5% 97%, 99.2% 98%, 98.6% 99%, 98% 99.3%, 0 99.3%, 0 .5%);
    clip-path: polygon(69.5% .5%, 72.2% 5.7%, 88% 5.7%, 90.7% .5%, 96% .5%, 96.5% .8%, 97% 1.4%, 99.2% 6%, 99.55% 7%, 99.7% 8%, 99.7% 96%, 99.5% 97%, 99.2% 98%, 98.6% 99%, 98% 99.3%, 0 99.3%, 0 .5%);
    display: flex;
    align-items: center
}

.aboutSection .aboutTiles .mintTile__image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: -moz-fit-content;
    width: fit-content
}

.aboutSection .aboutTiles .mintTile__sidebar {
    position: relative;
    height: 50%;
    width: 40px
}

.aboutSection .aboutTiles .mintTile__sidebar svg {
    height: 100%;
    width: 100%
}

@media(max-width:1365px) {
    .aboutSection .aboutTiles .mintTile__sidebar {
        width: 30px
    }
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .mintTile__sidebar {
        width: 28px
    }
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .mintTile__sidebar {
        width: 25px
    }
}

@media(max-width:329px) {
    .aboutSection .aboutTiles .mintTile__sidebar {
        width: 20px
    }
}

.aboutSection .aboutTiles .mintTile__content {
    position: relative;
    margin-left: .75rem;
    max-height: 90%;
    width: 40%
}

.aboutSection .aboutTiles .mintTile__content p {
    margin-top: .125rem;
    margin-bottom: .25rem;
    font-weight: 400
}

@media (min-width:640px) {
    .aboutSection .aboutTiles .mintTile__content p {
        margin-top: .25rem;
        margin-bottom: .5rem
    }
}

.aboutSection .aboutTiles .mintTile__timer {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    z-index: 10;
    width: 40%
}

.aboutSection .aboutTiles .mintTile__timer svg {
    height: 100%;
    width: 100%
}

.aboutSection .aboutTiles .roadmapTile {
    grid-column: span 3/span 3;
    grid-row: span 1/span 1;
    align-self: end
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .roadmapTile {
        grid-column: span 1/span 1
    }
}

.aboutSection .aboutTiles .roadmapTile__body {
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-clip-path: polygon(98% .5%, 99.6% 3.1%, 99.6% 28.5%, 97.2% 33.5%, 97.2% 66.5%, 99.6% 72%, 99.6% 92.5%, 96.2% 99.5%, 0 99.5%, 0 .5%);
    clip-path: polygon(98% .5%, 99.6% 3.1%, 99.6% 28.5%, 97.2% 33.5%, 97.2% 66.5%, 99.6% 72%, 99.6% 92.5%, 96.2% 99.5%, 0 99.5%, 0 .5%)
}

.aboutSection .aboutTiles .roadmapTile__content {
    position: relative;
    z-index: 10;
    margin-left: 1.25rem;
    max-height: 90%;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 70%
}

.aboutSection .aboutTiles .roadmapTile__content p {
    margin-top: .125rem;
    margin-bottom: .25rem;
    width: 100%
}

@media (min-width:640px) {
    .aboutSection .aboutTiles .roadmapTile__content p {
        margin-top: .25rem;
        margin-bottom: .5rem
    }
}

.aboutSection .aboutTiles .roadmapTile__image {
    position: absolute;
    top: 1%;
    right: -30%;
    height: 98%;
    width: auto;
    box-shadow: 0 0 41px 7px #0b1325
}

.aboutSection .aboutTiles .teamTile {
    grid-column: span 2/span 2;
    grid-row: span 1/span 1;
    align-self: start
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .teamTile {
        grid-column: span 1/span 1
    }
}

.aboutSection .aboutTiles .teamTile__body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem
}

.aboutSection .aboutTiles .teamTile__content {
    position: relative;
    display: flex;
    max-height: 90%;
    width: 80%;
    flex-direction: column;
    align-items: center
}

.aboutSection .aboutTiles .teamTile__content p {
    margin-top: .25rem;
    margin-bottom: .5rem;
    text-align: center
}

@media(max-width:424px) {
    .aboutSection .aboutTiles .teamTile__content {
        margin-top: 0
    }
}

.aboutSection .aboutTiles .accordionTile {
    display: flex
}

.aboutSection .aboutTiles .accordionTile>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-2px * var(--tw-space-x-reverse));
    margin-left: calc(-2px * calc(1 - var(--tw-space-x-reverse)))
}

.aboutSection .aboutTiles .accordionTile {
    grid-column: span 4/span 4;
    grid-row: span 1/span 1;
    align-self: start
}

@media(max-width:799px) {
    .aboutSection .aboutTiles .accordionTile {
        grid-column: span 1/span 1
    }
}

.aboutSection .aboutTiles .collectionTile__body {
    display: flex;
    align-items: center
}

.aboutSection .aboutTiles .collectionTile__body .collectionGalleryOutline {
    margin: 1rem 1.75rem 1.5rem;
    height: 100%
}

.aboutSection .aboutTiles .collectionTile__body .collectionGalleryOutline svg {
    height: 100%;
    width: 98%
}

.aboutSection .aboutTiles .collectionTile__header {
    position: absolute;
    bottom: 1.5rem;
    left: .75rem;
    display: flex;
    align-items: center
}

.aboutSection .aboutTiles .collectionTile__header_bg {
    position: absolute
}

.aboutSection .aboutTiles .collectionTile__header_icon {
    z-index: 10;
    margin-left: .5rem;
    margin-right: .5rem;
    width: -moz-fit-content;
    width: fit-content
}

.aboutSection .aboutTiles .collectionTile__header_icon svg {
    height: 100%;
    width: 90%
}

.aboutSection .aboutTiles .collectionTile__header_text {
    z-index: 10;
    text-transform: uppercase;
    color: #318dff;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important
}

.aboutSection .aboutTiles .clothingTile__body {
    display: flex;
    align-items: center;
    justify-content: center
}

.aboutSection .aboutTiles .clothingTile__icon {
    width: 30%
}

.aboutSection .aboutTiles .clothingTile__icon svg {
    height: 100%;
    width: 100%
}

.TCSection,
.faqSection,
.mintInfoSection,
.mintSection,
.mintedSection,
.page404,
.roadmapSection,
.shopSection,
.storySection,
.teamSection,
.whitelistSection {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    background-color: transparent
}

.popup {
    position: relative;
    z-index: 20;
    display: flex;
    width: 81%;
    flex-direction: column
}

.popup .popup__bg>svg,
.popup__body {
    height: 100%;
    width: 100%
}

.popup__body {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center
}

.popup .tileButton {
    width: -moz-fit-content;
    width: fit-content;
    z-index: 20
}

.popup__content {
    position: relative;
    margin-left: 3rem;
    display: flex;
    height: 85%;
    width: 40%;
    flex-direction: column;
    justify-content: space-between
}

.popup__content p {
    margin-left: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

.popup .popupOutline {
    position: absolute;
    bottom: 2.25rem;
    right: 2.25rem;
    z-index: 10;
    height: 84%
}

.popup .popupOutline svg,
.popup svg {
    height: 100%;
    width: 100%
}

.shopSection .shopPopup {
    width: 71%;
    margin-top: -13%
}

@media (min-width:640px) {
    .shopSection .shopPopup {
        margin-top: 0
    }
}

@media(max-width:799px) {
    .shopSection .shopPopup {
        width: 81%
    }

    .shopSection .shopPopup .shopPopupBG {
        height: 65vh;
        width: 100%;
        background-color: #0a1124;
        box-shadow: 0 0 0 2px #318dff;
        border-radius: 10px;
        transform: translateZ(0)
    }
}

.shopSection .shopPopup .shopPopup__body {
    margin-right: -1px
}

@media(max-width:799px) {
    .shopSection .shopPopup .shopPopup__body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden
    }
}

.shopSection .shopPopup .shopPopup__body::-webkit-scrollbar {
    width: .2em
}

.shopSection .shopPopup .shopPopup__body::-webkit-scrollbar-track {
    margin: 50px
}

.shopSection .shopPopup .shopPopup__body::-webkit-scrollbar-thumb {
    background-color: #318dff;
    border-radius: 100px
}

.shopSection .shopPopup__content {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start
}

@media(max-width:799px) {
    .shopSection .shopPopup__content {
        margin: 6% auto;
        height: auto;
        width: 100%;
        justify-content: flex-start;
        align-self: start
    }
}

.shopSection .shopPopup__description {
    z-index: 30;
    margin-left: 4rem;
    margin-top: -7%;
    width: 45%;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

@media (min-width:1024px) {
    .shopSection .shopPopup__description {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:1280px) {
    .shopSection .shopPopup__description {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1536px) {
    .shopSection .shopPopup__description {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media(max-width:799px) {
    .shopSection .shopPopup__description {
        margin-left: 0;
        margin-top: -8%;
        width: 100%;
        padding-left: 5%;
        padding-right: 3%
    }
}

.shopSection .shopPopup__image {
    position: absolute;
    top: 0;
    right: -1%;
    z-index: 20;
    height: 100%;
    width: -moz-fit-content;
    width: fit-content
}

@media(max-width:799px) {
    .shopSection .shopPopup__image {
        position: relative;
        top: auto;
        right: auto;
        margin-top: -29%;
        margin-left: 5%;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%;
        max-width: 28rem
    }
}

.shopSection .shopPopup .shopPopupHeader {
    margin-top: 3.5%;
    margin-left: 3.5rem;
    width: 73%
}

@media(max-width:799px) {
    .shopSection .shopPopup .shopPopupHeader {
        margin-left: 5%;
        width: 125%
    }

    .shopSection .shopPopup .shopPopupHeader svg {
        height: auto;
        width: 100%
    }

    .shopSection .shopPopup .shopPopupHeader__pointer {
        visibility: hidden
    }
}

.shopSection .shopPopup .fadedPortion-top {
    top: 0;
    z-index: 30;
    width: 100%;
    border-radius: 10px
}

.shopSection .shopPopup .fadedPortion-bottom {
    bottom: 0;
    width: 100%;
    border-radius: 10px
}

.storySection .storyPopup {
    width: 45%;
    max-width: 56rem
}

@media (min-width:1536px) {
    .storySection .storyPopup {
        width: 40%
    }
}

.storySection .storyPopup {
    margin-top: -13%
}

@media (min-width:640px) {
    .storySection .storyPopup {
        margin-top: 0
    }
}

@media(max-width:799px) {
    .storySection .storyPopup {
        width: 81%
    }

    .storySection .storyPopup .storyPopupBG {
        height: 40vh;
        width: 100%;
        background-color: #0a1124;
        box-shadow: 0 0 0 2px #318dff;
        border-radius: 10px;
        transform: translateZ(0)
    }
}

.storySection .storyPopup .storyPopup__body {
    margin-right: -1px
}

@media(max-width:799px) {
    .storySection .storyPopup .storyPopup__body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden
    }
}

.storySection .storyPopup .storyPopup__body::-webkit-scrollbar {
    width: .2em
}

.storySection .storyPopup .storyPopup__body::-webkit-scrollbar-track {
    margin: 50px
}

.storySection .storyPopup .storyPopup__body::-webkit-scrollbar-thumb {
    background-color: #318dff;
    border-radius: 100px
}

.storySection .storyPopup__content {
    position: relative;
    z-index: 10;
    margin: auto;
    display: flex;
    height: 85%;
    width: 85%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

@media(max-width:799px) {
    .storySection .storyPopup__content {
        margin: 6% auto;
        height: auto;
        width: 100%;
        justify-content: flex-start;
        align-self: start
    }
}

.storySection .storyPopup__description {
    margin-top: 5%;
    width: 80%;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

@media (min-width:1024px) {
    .storySection .storyPopup__description {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1280px) {
    .storySection .storyPopup__description {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media (min-width:1536px) {
    .storySection .storyPopup__description {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

@media(max-width:799px) {
    .storySection .storyPopup__description {
        margin-left: 0;
        width: 100%;
        padding-left: 5%;
        padding-right: 3%;
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.storySection .storyPopup .storyPopupHeader {
    margin-top: 1.5%;
    width: 65%
}

@media(max-width:799px) {
    .storySection .storyPopup .storyPopupHeader {
        width: 75%
    }

    .storySection .storyPopup .storyPopupHeader svg {
        height: auto;
        width: 100%
    }
}

.storySection .storyPopup .closePopup {
    top: 1.75rem;
    width: 1.25rem
}

@media (min-width:1536px) {
    .storySection .storyPopup .closePopup {
        top: 2.5rem
    }
}

.storySection .storyPopup .fadedPortion-top {
    top: 0;
    z-index: 30;
    width: 100%;
    border-radius: 10px
}

.storySection .storyPopup .fadedPortion-bottom {
    bottom: 0;
    width: 100%;
    border-radius: 10px
}

.mintInfoPopup {
    margin-top: -13%
}

@media (min-width:640px) {
    .mintInfoPopup {
        margin-top: 0
    }
}

.mintInfoPopup {
    will-change: transform
}

@media(max-width:799px) {
    .mintInfoPopup .mintInfoPopupBG {
        height: 65vh;
        width: 100%;
        background-color: #0a1124;
        box-shadow: 0 0 0 2px #318dff;
        border-radius: 10px;
        transform: translateZ(0)
    }
}

.mintInfoPopup .mintInfoPopup__body {
    margin-right: -1px
}

@media(max-width:799px) {
    .mintInfoPopup .mintInfoPopup__body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden
    }
}

.mintInfoPopup .mintInfoPopup__body::-webkit-scrollbar {
    width: .2em
}

.mintInfoPopup .mintInfoPopup__body::-webkit-scrollbar-track {
    margin: 50px
}

.mintInfoPopup .mintInfoPopup__body::-webkit-scrollbar-thumb {
    background-color: #318dff;
    border-radius: 100px
}

.mintInfoPopup__content {
    position: relative;
    z-index: 20;
    margin-left: 3.5rem;
    display: flex;
    height: 88%;
    width: 60%;
    flex-direction: column;
    justify-content: space-between
}

@media(max-width:799px) {
    .mintInfoPopup__content {
        margin-left: auto;
        margin-right: auto;
        margin-top: 6%;
        width: 90%;
        justify-content: flex-start;
        align-self: start
    }
}

.mintInfoPopup__content .mintInfoPopup__header {
    z-index: 20;
    width: 15vw;
    max-width: 250px
}

@media(max-width:799px) {
    .mintInfoPopup__content .mintInfoPopup__header {
        width: 50%
    }
}

.mintInfoPopup__content .mintInfoPopup__description {
    margin-left: .25rem;
    margin-top: -1.25rem;
    width: 66.666667%;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

@media (min-width:1024px) {
    .mintInfoPopup__content .mintInfoPopup__description {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:1280px) {
    .mintInfoPopup__content .mintInfoPopup__description {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1536px) {
    .mintInfoPopup__content .mintInfoPopup__description {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media(max-width:799px) {
    .mintInfoPopup__content .mintInfoPopup__description {
        margin-left: 0;
        margin-top: .5rem;
        width: 100%
    }
}

.mintInfoPopup__content svg {
    height: 100%;
    width: 100%
}

.mintInfoPopup .mintPhaseTiles {
    display: flex
}

.mintInfoPopup .mintPhaseTiles>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))
}

@media(max-width:799px) {
    .mintInfoPopup .mintPhaseTiles {
        margin-top: 1.25rem;
        margin-bottom: 3.5rem;
        width: 100%;
        flex-direction: column;
        align-items: center
    }

    .mintInfoPopup .mintPhaseTiles>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        --tw-space-y-reverse: 0;
        margin: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))) calc(0px * var(--tw-space-x-reverse)) calc(1.25rem * var(--tw-space-y-reverse)) calc(0px * calc(1 - var(--tw-space-x-reverse)))
    }
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile {
    position: relative;
    width: 22vw
}

@media(max-width:799px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile {
        width: 88%;
        max-width: 28rem
    }
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__top {
    position: relative
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 95%;
    transform: translate(-52%, -50%)
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .875rem;
    line-height: 1rem
}

@media (min-width:640px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        padding-left: 0;
        padding-right: 0;
        line-height: .85rem
    }
}

@media (min-width:768px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: .5rem
    }
}

@media (min-width:1024px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: .6rem
    }
}

@media (min-width:1280px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: .75rem;
        line-height: 1rem
    }
}

@media (min-width:1536px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media(max-width:424px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: calc(13px + 3*(100vw - 800px)/800);
        line-height: .8rem
    }
}

@media(max-width:339px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__top-text p {
        font-size: calc(12px + 4*(100vw - 800px)/800);
        line-height: .68rem
    }
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button {
    position: absolute;
    top: 50%;
    right: 3%;
    display: flex
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button {
    border-radius: .25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-transform: uppercase
}

@media (min-width:1536px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button {
    background-color: #fff;
    color: #318dff;
    transform: translateY(-50%);
    letter-spacing: .02rem;
    cursor: var(--linkCursor)
}

@media(max-width:424px) {
    .mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button {
        font-size: calc(12px + 6*(100vw - 320px)/680)
    }
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button-icon {
    margin-bottom: .125rem;
    width: .75rem
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__footer .mintPhaseTile__button-icon svg {
    height: 100%;
    width: 100%
}

.mintInfoPopup .mintPhaseTiles .mintPhaseTile__bg {
    opacity: .9
}

.mintInfoPopup .mintTile__timer {
    position: absolute;
    bottom: 2.25rem;
    right: 2.25rem;
    z-index: 20;
    width: 250px
}

.mintInfoPopup .mintTile__timer svg {
    height: 100%;
    width: 100%
}

@media(max-width:799px) {
    .mintInfoPopup .mintTile__timer {
        position: relative;
        bottom: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: -10%;
        width: 66.666667%;
        max-width: 20rem
    }
}

.mintInfoPopup__image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: -moz-fit-content;
    width: fit-content
}

@media(max-width:799px) {
    .mintInfoPopup__image {
        position: relative;
        top: auto;
        right: auto;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%;
        max-width: 28rem
    }
}

.mintInfoPopup .mintInfoPopupBG {
    visibility: hidden
}

.mintInfoPopup .fadedPortion-top {
    top: 0;
    z-index: 30;
    width: 100%;
    border-radius: 10px
}

.mintInfoPopup .fadedPortion-bottom {
    bottom: 0;
    width: 100%;
    border-radius: 10px
}

@media(max-width:799px) {
    .mintInfoPopup .closePopup {
        top: 1.25rem;
        right: 1.25rem;
        width: 1.5rem
    }
}

.faqPopup {
    position: relative;
    margin-top: -10%
}

@media (min-width:640px) {
    .faqPopup {
        margin-top: 0
    }
}

@media(max-width:799px) {
    .faqPopup .faqPopupBG {
        height: 65vh;
        width: 100%;
        background-color: #0a1124;
        box-shadow: 0 0 0 2px #318dff;
        border-radius: 10px
    }
}

.faqPopup__body {
    margin-right: -1px
}

@media(max-width:799px) {
    .faqPopup__body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden
    }

    .faqPopup__body::-webkit-scrollbar {
        width: .2em
    }

    .faqPopup__body::-webkit-scrollbar-track {
        margin: 50px
    }

    .faqPopup__body::-webkit-scrollbar-thumb {
        background-color: #318dff;
        border-radius: 100px
    }
}

.faqPopup__header {
    z-index: 20;
    margin-bottom: 0;
    width: 15vw;
    max-width: 250px
}

@media(max-width:799px) {
    .faqPopup__header {
        margin-left: 1rem;
        margin-top: 6%;
        width: 50%
    }
}

.faqPopup__content {
    position: relative;
    z-index: 20;
    margin-left: 3.5rem;
    display: flex;
    height: 88%;
    width: 62%;
    flex-direction: column;
    justify-content: flex-start
}

@media(max-width:799px) {
    .faqPopup__content {
        margin-left: auto;
        height: 100%;
        width: 100%;
        align-self: start
    }
}

.faqPopup__image {
    position: absolute;
    top: 50%;
    right: 1.5px;
    height: -moz-fit-content;
    height: fit-content;
    width: 36%;
    transform: translateY(-50%)
}

@media(max-width:799px) {
    .faqPopup__image {
        position: relative;
        top: auto;
        right: -.3em;
        margin-top: -15%;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%;
        max-width: 24rem;
        margin-right: -2px;
        transform: translate(0);
        align-self: end
    }
}

.faqPopup .faqAccordion {
    z-index: 10;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0
}

@media(min-width:801px) {
    .faqPopup .faqAccordion {
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-right: 1.25rem
    }

    .faqPopup .faqAccordion::-webkit-scrollbar {
        width: .5em
    }

    .faqPopup .faqAccordion::-webkit-scrollbar-track {
        outline: 2px solid #0f1a35;
        border-radius: 100px
    }

    .faqPopup .faqAccordion::-webkit-scrollbar-thumb {
        background-color: #0f1a35;
        border-radius: 100px
    }
}

.faqPopup .faqAccordion_card {
    position: relative;
    margin-left: .75rem;
    margin-right: .75rem;
    margin-bottom: 3rem
}

.faqPopup .faqAccordion_card__label {
    position: relative;
    z-index: 20
}

.faqPopup .faqAccordion_card__label-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 1rem 5rem .75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.faqPopup .faqAccordion_card__label-content p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem
}

@media (min-width:768px) {
    .faqPopup .faqAccordion_card__label-content p {
        font-size: 1.2vw
    }
}

.faqPopup .faqAccordion_card__label-content p {
    font-weight: 500;
    color: #318dff;
    transform: translate(-50%, -50%)
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card__label-content p {
        width: 60%;
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media(max-width:424px) {
    .faqPopup .faqAccordion_card__label-content p {
        width: 70%;
        font-size: .8rem;
        line-height: 1rem
    }
}

@media(max-width:329px) {
    .faqPopup .faqAccordion_card__label-content p {
        font-size: .7rem
    }
}

.faqPopup .faqAccordion_card__label-content span {
    position: absolute;
    top: 5%;
    left: 2%;
    font-size: 1.125rem;
    line-height: 1.75rem
}

@media (min-width:768px) {
    .faqPopup .faqAccordion_card__label-content span {
        font-size: 1.4vw
    }
}

@media (min-width:1280px) {
    .faqPopup .faqAccordion_card__label-content span {
        top: 15%
    }
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card__label-content span {
        top: 50%;
        font-size: 1.125rem;
        line-height: 1.75rem;
        transform: translateY(-60%);
        font-size: max(4.5vw, 15px)
    }
}

.faqPopup .faqAccordion_card__label-content .accordionPlus {
    position: absolute;
    top: 15%;
    right: 1.5%;
    height: 40%
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card__label-content .accordionPlus {
        top: 40%;
        height: 50%;
        width: 10%;
        transform: translateY(-50%)
    }
}

.faqPopup .faqAccordion_card__content {
    height: 0;
    overflow: hidden;
    z-index: 10;
    margin-top: -2rem;
    background-color: #0f1a35;
    border-radius: 10px;
    border: 2px solid #318dff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 74% 98%, 27% 98%, 26% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 74% 98%, 27% 98%, 26% 100%, 0 100%)
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card__content {
        -webkit-clip-path: none;
        clip-path: none
    }
}

.faqPopup .faqAccordion_card__content p {
    padding: 3rem 3.5rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5rem
}

@media (min-width:1536px) {
    .faqPopup .faqAccordion_card__content p {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card__content p {
        padding: 3rem 1.25rem 1.75rem;
        font-size: .9rem;
        line-height: 1.4rem
    }
}

.faqPopup .faqAccordion_card-footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50%;
    transform: translate(-50%)
}

@media(max-width:599px) {
    .faqPopup .faqAccordion_card-footer {
        visibility: hidden
    }
}

.faqPopup svg {
    height: 100%;
    width: 100%
}

.faqPopup .fadedPortion-top {
    top: 0;
    z-index: 30;
    width: 100%;
    border-radius: 10px
}

.faqPopup .fadedPortion-bottom {
    bottom: 0;
    width: 100%;
    border-radius: 10px
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup {
        margin-top: -5%;
        width: 71%;
        max-width: 300px
    }
}

.roadmapSection .roadmapPopup__body {
    overflow: hidden;
    pointer-events: none;
    padding: 2px
}

.roadmapSection .roadmapPopup .roadmapSlides {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden
}

@media(min-width:801px) {
    .roadmapSection .roadmapPopup .roadmapSlides {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 72%, 3% 67%, 3% 33%, 0 28%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 72%, 3% 67%, 3% 33%, 0 28%)
    }
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide {
    height: 85%;
    width: 100%;
    overflow-y: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: var(--defaultCursor);
    pointer-events: auto;
    padding: 5% 6%
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide {
        height: 80%
    }
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__header {
    height: 5vw;
    width: auto
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__header {
        height: 8%
    }
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__header svg {
    height: 100%;
    width: auto
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body {
    width: 55%;
    padding-top: 1rem
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body p {
    font-size: .75rem;
    line-height: 1rem
}

@media (min-width:1024px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body p {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:1280px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body p {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1536px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body p {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media(max-width:329px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body p {
        font-size: .6rem;
        line-height: .75rem
    }
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__body {
        width: 100%;
        padding-top: 1rem
    }
}

.roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__img {
    position: absolute;
    top: 50%;
    right: 5%;
    height: -moz-fit-content;
    height: fit-content;
    width: 30%;
    transform: translateY(-55%)
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup .roadmapSlides .roadmapSlide__img {
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.25rem;
        width: 90%;
        transform: translate(0)
    }
}

.roadmapSection .roadmapPopup .roadmapSlides #communityRoadmapSlide .roadmapSlide__img,
.roadmapSection .roadmapPopup .roadmapSlides #ipRoadmapSlide .roadmapSlide__img {
    right: 9%;
    width: 25%
}

@media(max-width:799px) {

    .roadmapSection .roadmapPopup .roadmapSlides #communityRoadmapSlide .roadmapSlide__img,
    .roadmapSection .roadmapPopup .roadmapSlides #ipRoadmapSlide .roadmapSlide__img {
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        transform: translate(0)
    }
}

.roadmapSection .roadmapPopup .roadmapSlides #storytellingRoadmapSlide .roadmapSlide__img {
    right: 12%;
    top: 52%;
    width: 20%
}

@media(max-width:799px) {
    .roadmapSection .roadmapPopup .roadmapSlides #storytellingRoadmapSlide .roadmapSlide__img {
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        transform: translate(0)
    }
}

.roadmapSection .roadmapPopup svg {
    height: 100%;
    width: 100%
}

.roadmapSection__navButtons {
    position: absolute;
    z-index: 20;
    display: flex;
    width: 87%;
    justify-content: space-between
}

.mintPopup {
    width: 74%
}

@media(max-width:799px) {
    .mintPopup {
        width: 79%;
        max-width: 24rem
    }
}

.mintPopup__body {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column
}

.mintPopup__body .mintPopupFooter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    right: 1px;
    left: 1px;
    width: 99.8%
}

@media(max-width:799px) {
    .mintPopup__body .mintPopupFooter {
        right: 0;
        left: 0;
        width: 100%
    }
}

.mintPopup__body .mintQuantitySelector {
    position: absolute;
    bottom: 22%;
    width: 22%
}

.mintPopup__body .mintQuantitySelector__buttonText {
    pointer-events: none
}

@media(max-width:799px) {
    .mintPopup__body .mintQuantitySelector {
        bottom: 26%;
        width: 50%
    }
}

.mintPopup__body .mintPopupHeader {
    position: absolute;
    top: 35%;
    width: 55%
}

.mintPopup__body .mintPopupHeader__bars,
.mintPopup__body .mintPopupHeader__corners,
.mintPopup__body .mintPopupHeader__text-line1,
.mintPopup__body .mintPopupHeader__text-line2Group {
    visibility: hidden
}

@media(max-width:799px) {
    .mintPopup__body .mintPopupHeader {
        top: 35%;
        width: 87%
    }
}

.mintPopup__body .gachaponMachine {
    visibility: hidden;
    position: absolute;
    top: 10%;
    height: 23%
}

.mintPopup__body .mintWalletID {
    position: absolute;
    right: 3%;
    top: 5%;
    width: 13%;
    font-weight: 500
}

@media(max-width:799px) {
    .mintPopup__body .mintWalletID {
        width: 20%
    }
}

.mintPopup svg {
    height: 100%;
    width: 100%
}

.mintPopup .closePopup {
    top: 2.5rem;
    left: 2.25rem;
    right: auto
}

@media(max-width:799px) {
    .mintPopup .closePopup {
        top: 1.25rem;
        left: 1.25rem;
        width: 1.25rem
    }
}

.whitelistSection .whitelistPopup {
    z-index: 10;
    width: 74%
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup {
        width: 79%;
        max-width: 24rem
    }

    .whitelistSection .whitelistPopup .whitelistPopupBG__spotsLeft {
        position: absolute;
        left: 50%;
        top: 65%;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%;
        text-align: center;
        font-size: .75rem;
        line-height: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #318dff;
        font-size: 2.5vw;
        transform: translate(-50%, -50%);
        visibility: hidden
    }
}

.whitelistSection .whitelistPopup svg {
    height: 100%;
    width: 100%
}

.whitelistSection .whitelistPopup__body {
    z-index: 10
}

.whitelistSection .whitelistPopup__text {
    position: absolute;
    left: 50%;
    top: 50%;
    height: -moz-fit-content;
    height: fit-content;
    font-weight: 700;
    text-transform: uppercase;
    transform: translate(-50%, -50%)
}

.whitelistSection .whitelistPopup__text-checkText {
    width: 70%
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__text-checkText {
        width: 85%
    }
}

.whitelistSection .whitelistPopup__text-errorText {
    top: 46%;
    width: 46%
}

.whitelistSection .whitelistPopup__text-errorText .whitelistPopup__text-line1,
.whitelistSection .whitelistPopup__text-errorText .whitelistPopup__text-line2 {
    visibility: hidden
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__text-errorText {
        width: 85%
    }
}

.whitelistSection .whitelistPopup__icon {
    position: absolute;
    left: 50%;
    top: 21%;
    height: -moz-fit-content;
    height: fit-content;
    width: 3.7%;
    transform: translate(-50%, -50%)
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__icon {
        width: 10%
    }
}

.whitelistSection .whitelistPopup__icon-check,
.whitelistSection .whitelistPopup__icon-error,
.whitelistSection .whitelistPopup__icon-verified {
    visibility: hidden
}

.whitelistSection .whitelistPopup__button {
    position: absolute;
    left: 50%;
    top: 97%;
    z-index: 20;
    height: -moz-fit-content;
    height: fit-content;
    width: 35%;
    transform: translate(-50%, -50%);
    cursor: var(--linkCursor)
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__button {
        top: 94.5%;
        width: 55%
    }
}

.whitelistSection .whitelistPopup__button p {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    font-weight: 500;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    color: #318dff;
    letter-spacing: .007em;
    font-size: 2vw;
    pointer-events: none
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__button p {
        font-size: 4vw
    }
}

.whitelistSection .whitelistPopup__walletID {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: .25rem;
    padding: .5px 1rem;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    width: -moz-fit-content;
    width: fit-content;
    letter-spacing: .047em;
    background-color: #318dff;
    font-size: 1.2vw;
    color: #0f1a35
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__walletID {
        font-size: 3vw
    }
}

.whitelistSection .whitelistPopup__progressBar {
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 110%;
    z-index: 5;
    height: -moz-fit-content;
    height: fit-content;
    width: 18%;
    transform: translate(-50%, -50%)
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__progressBar {
        top: 100%;
        width: 30%
    }
}

.whitelistSection .whitelistPopup__progressBar p {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    color: #318dff;
    letter-spacing: .007em;
    font-size: 2vw;
    pointer-events: none
}

@media(max-width:799px) {
    .whitelistSection .whitelistPopup__progressBar p {
        font-size: 3.5vw;
        transform: translate(-50%, -45%)
    }
}

.whitelistSection .whitelistPopup .closePopup {
    top: 1.75rem;
    left: 2.25rem;
    right: auto
}

.whitelistSection .whitelistPopup .whitelistPopupBG {
    z-index: 10
}

.teamSection .teamCards {
    position: relative;
    z-index: 19;
    display: flex;
    width: 55%;
    justify-content: center
}

.teamSection .teamCards>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(5rem * var(--tw-space-x-reverse));
    margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)))
}

.teamSection .teamCards {
    perspective: 1000px
}

@media(max-width:799px) {
    .teamSection .teamCards {
        height: 50%;
        width: 100%
    }

    .teamSection .teamCards>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0px * var(--tw-space-x-reverse));
        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)))
    }

    .teamSection .teamCards {
        overflow: hidden;
        justify-content: start
    }
}

.teamSection .teamCards .teamCard {
    position: relative
}

@media(max-width:799px) {
    .teamSection .teamCards .teamCard {
        width: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: min(20%, 200px)
    }
}

@media(max-width:424px) {
    .teamSection .teamCards .teamCard {
        max-width: -moz-max-content;
        max-width: max-content;
        padding: 15%
    }
}

.teamSection .teamCards .teamCard .teamCard__containter {
    position: relative
}

.teamSection .teamCards .teamCard .teamCardImage {
    position: absolute;
    top: 4.6%;
    left: 0;
    right: 0;
    margin: auto;
    width: 88%;
    overflow: hidden;
    border-radius: 13px
}

.teamSection .teamCards .teamCard .teamCardImage__image {
    position: absolute;
    height: 100%;
    width: 100%
}

.teamSection .teamCards .teamCard .teamCardPointer {
    position: absolute;
    left: 5.5%;
    top: 17.5%;
    width: 5.6%
}

.teamSection .teamCards .teamCard .teamCardId {
    position: absolute;
    right: 5.5%;
    top: 4.5%;
    font-size: 1.2vw
}

@media(max-width:424px) {
    .teamSection .teamCards .teamCard .teamCardId {
        font-size: calc(12px + 6*(100vw - 320px)/680)
    }
}

.teamSection .teamCards .teamCard .teamCardDesc {
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 36.5%;
    margin: auto;
    width: 88%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-style: italic
}

@media (min-width:1280px) {
    .teamSection .teamCards .teamCard .teamCardDesc {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

@media (min-width:1536px) {
    .teamSection .teamCards .teamCard .teamCardDesc {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}

.teamSection .teamCards .teamCard .teamCardDesc {
    transform: translate(-50%, -50%);
    font-weight: 600
}

@media(max-width:799px) {
    .teamSection .teamCards .teamCard .teamCardDesc {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

.teamSection .teamCards .teamCard .teamCardTiles {
    position: absolute;
    left: 50%;
    top: 67%;
    display: flex;
    width: 88%;
    flex-direction: column
}

.teamSection .teamCards .teamCard .teamCardTiles>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2% * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2% * var(--tw-space-y-reverse))
}

.teamSection .teamCards .teamCard .teamCardTiles {
    transform: translate(-50%);
    cursor: var(--linkCursor)
}

.teamSection .teamCards svg {
    height: 100%;
    width: 100%
}

.teamSection__navButtons {
    position: absolute;
    z-index: 20;
    display: flex;
    width: 87%;
    justify-content: space-between
}

.mintedSection .mintedPopup {
    width: 74%
}

@media(max-width:799px) {
    .mintedSection .mintedPopup {
        width: 79%;
        max-width: 24rem
    }
}

.mintedSection .mintedPopup .mintedPopupMessage {
    position: absolute;
    left: 50%;
    top: 38%;
    height: -moz-fit-content;
    height: fit-content;
    width: 58%;
    transform: translate(-50%, -50%)
}

@media(max-width:799px) {
    .mintedSection .mintedPopup .mintedPopupMessage {
        top: 32%;
        width: 85%
    }
}

.mintedSection .mintedPopup .mintedPopupButton {
    position: absolute;
    left: 50%;
    top: 77%;
    z-index: 20;
    height: -moz-fit-content;
    height: fit-content;
    width: 30%;
    transform: translate(-50%, -50%)
}

.mintedSection .mintedPopup .mintedPopupButton text {
    pointer-events: none
}

@media(max-width:799px) {
    .mintedSection .mintedPopup .mintedPopupButton {
        top: 68%;
        width: 65%
    }
}

.mintedSection .mintedPopup svg {
    height: 100%;
    width: 100%
}

.mintedSection .mintedPopup .closePopup {
    top: 1.75rem;
    left: 2.25rem;
    right: auto
}

@media(max-width:799px) {
    .mintedSection .mintedPopup .closePopup {
        top: 1.25rem;
        left: 1.25rem;
        width: 1.25rem
    }
}

.TCPopup {
    margin-top: -13%
}

@media (min-width:640px) {
    .TCPopup {
        margin-top: 0
    }
}

@media(max-width:799px) {
    .TCPopup .TCPopupBG {
        height: 65vh;
        width: 100%;
        background-color: #0a1124;
        box-shadow: 0 0 0 2px #318dff;
        border-radius: 10px
    }
}

.TCPopup__content {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    padding-left: 3rem;
    padding-right: 3rem
}

@media(max-width:799px) {
    .TCPopup__content {
        height: 90%;
        padding-left: .75rem;
        padding-right: .75rem
    }
}

.TCPopup__header {
    display: flex;
    flex-direction: column;
    align-items: center
}

.TCPopup__header>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.TCPopup__header {
    padding-left: 2rem;
    padding-right: 2rem
}

@media (min-width:640px) {
    .TCPopup__header {
        padding-left: 0;
        padding-right: 0
    }
}

.TCPopup__header-text {
    width: 30%
}

@media(max-width:799px) {
    .TCPopup__header-text {
        width: 80%
    }
}

.TCPopup__text {
    margin-top: 1.5rem;
    height: 80%
}

.TCPopup__text>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.TCPopup__text {
    overflow: auto;
    padding: 1rem 2rem
}

@media(max-width:799px) {
    .TCPopup__text {
        height: 90%;
        padding-left: 0;
        padding-right: 0
    }
}

.TCPopup__text p {
    font-size: 1rem;
    line-height: 1.5rem
}

@media (min-width:1536px) {
    .TCPopup__text p {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.TCPopup__text::-webkit-scrollbar {
    width: .5em
}

@media(max-width:799px) {
    .TCPopup__text::-webkit-scrollbar {
        width: .3em
    }
}

.TCPopup__text::-webkit-scrollbar-track {
    outline: 2px solid #0f1a35;
    border-radius: 100px
}

.TCPopup__text::-webkit-scrollbar-thumb {
    background-color: #318dff;
    border-radius: 100px
}

.TCPopup .fadedPortionTC {
    position: absolute;
    z-index: 20;
    width: 90%;
    padding-left: 2rem;
    padding-right: 2rem;
    height: 50px;
    pointer-events: none
}

.TCPopup .fadedPortionTC-top {
    top: 16%;
    height: 2rem;
    background: linear-gradient(180deg, #0a1124 0, rgba(10, 17, 36, 0))
}

@media(max-width:799px) {
    .TCPopup .fadedPortionTC-top {
        top: 10%
    }
}

@media(max-width:424px) {
    .TCPopup .fadedPortionTC-top {
        top: 7%
    }
}

.TCPopup .fadedPortionTC-bottom {
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 17, 36, 0) 0, #0a1124)
}

@media(max-width:799px) {
    .TCPopup .closePopup {
        top: 1.25rem;
        right: 1.25rem;
        width: 1.5rem
    }
}

.TCPopup svg {
    height: 100%;
    width: 100%
}

.fadedPortion-top {
    top: 13%;
    background: linear-gradient(180deg, #0a1124 0, rgba(10, 17, 36, 0))
}

.fadedPortion-bottom,
.fadedPortion-top {
    position: absolute;
    z-index: 20;
    height: 2.5rem;
    width: 97%;
    pointer-events: none;
    height: 30px
}

.fadedPortion-bottom {
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 17, 36, 0) 0, #0a1124)
}

.closePopup {
    position: absolute;
    top: 1.75rem;
    right: 2.25rem;
    width: 2.5%;
    z-index: 30;
    cursor: var(--linkCursor);
    transform-origin: "50% 50%"
}

.closePopup svg {
    height: 100%;
    width: 100%
}

.profileSection {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.profileSection #profileBackgroundImages {
    position: absolute;
    height: 100%;
    width: 100%
}

.profileSection #profileBackgroundImages img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.profileSection__body {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    overflow: hidden
}

.profileSection__body .profileUCPopup {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 20;
    height: auto;
    width: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%)
}

@media(max-width:799px) {
    .profileSection__body .profileUCPopup {
        position: absolute;
        top: 35%;
        left: 50%;
        width: 85%
    }
}

.profileSection__body .profileUCPopup__content {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 10;
    display: flex;
    height: 70%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none
}

.profileSection__body .profileUCPopup__content-header {
    margin-bottom: 1vw;
    margin-top: 6%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.profileSection__body .profileUCPopup__content-header>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.4vw * var(--tw-space-x-reverse));
    margin-left: calc(1.4vw * calc(1 - var(--tw-space-x-reverse)))
}

.profileSection__body .profileUCPopup__content-header svg {
    height: auto;
    width: 2vw
}

.profileSection__body .profileUCPopup__content-header p {
    height: -moz-fit-content;
    height: fit-content;
    font-size: 2.5vw;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: #318dff
}

.profileSection__body .profileUCPopup__content-body {
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    font-size: .875rem;
    line-height: 1.25rem
}

@media (min-width:768px) {
    .profileSection__body .profileUCPopup__content-body {
        font-size: .7rem
    }
}

@media (min-width:1024px) {
    .profileSection__body .profileUCPopup__content-body {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:1280px) {
    .profileSection__body .profileUCPopup__content-body {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1536px) {
    .profileSection__body .profileUCPopup__content-body {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media(max-width:424px) {
    .profileSection__body .profileUCPopup__content-body {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .75rem;
        line-height: 1rem
    }
}

.profileSection #gridEffectCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10
}

.profileSection svg {
    height: 100%;
    width: 100%
}

@font-face {
    font-family: Tactic Sans Regular;
    src: url("") format("woff2")
}

@font-face {
    font-family: TacticSansExd-Blk;
    src: url("") format("woff2")
}

@font-face {
    font-family: Impact;
    src: url("") format("woff2")
}

@font-face {
    font-family: Eurostile;
    font-weight: 200;
    src: url("Eurostile-Reg.eb6e03aa.woff2") format("woff2")
}

@font-face {
    font-family: Eurostile;
    font-weight: 400;
    src: url("Eurostile-Med.4fc5648d.woff2") format("woff2")
}

@font-face {
    font-family: Eurostile;
    font-weight: 500;
    src: url("Eurostile-Bol.b276856b.woff2") format("woff2")
}

@font-face {
    font-family: Eurostile;
    font-weight: 600;
    src: url("Eurostile-Hea.7d9f9450.woff2") format("woff2")
}

::-moz-selection {
    background: #fff;
    color: #318dff
}

::selection {
    background: #fff;
    color: #318dff
}

::-webkit-scrollbar {
    width: 0
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
    background: transparent
}

body,
html {
    font-family: Eurostile, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    overflow-x: hidden;
    padding: 0;
    /* cursor: none; */
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
    height: 100vh;
    color: #fff;
    background-color: #000;
    margin: 0;
    width: 100%
}

:root {
    /* --linkCursor: none;
    --defaultCursor: none */
}

@media(min-width:701px) {
    a {
        cursor: var(--linkCursor) !important
    }
}

@media(max-width:799px) {

    .TCPopup__header-seprator,
    .aboutSection .aboutTiles .collectionTile__header,
    .faqPopup .closePopup,
    .faqPopup .fadedPortionAccordion,
    .globalSection .copyrightText,
    .globalSection .linkText,
    .hideOnMobile,
    .roadmapSection .roadmapPopup .closePopup,
    .shopSection .shopPopup .closePopup,
    .storySection .storyPopup .closePopup,
    .whitelistSection .whitelistPopup .closePopup {
        display: none
    }
}

@media(min-width:801px) {

    .faqPopup .fadedPortion-bottom,
    .faqPopup .fadedPortion-top,
    .hideOnDesktop,
    .mintInfoPopup .fadedPortion-bottom,
    .mintInfoPopup .fadedPortion-top,
    .mintedSection .backButton,
    .roadmapSection .backButton,
    .roadmapSection__navButtons,
    .shopSection .backButton,
    .shopSection .shopPopup .fadedPortion-bottom,
    .shopSection .shopPopup .fadedPortion-top,
    .storySection .backButton,
    .storySection .storyPopup .fadedPortion-bottom,
    .storySection .storyPopup .fadedPortion-top,
    .teamSection__navButtons,
    .whitelistSection .backButton {
        display: none
    }
}