/* Fonts */

@font-face {
    font-family: Wadik;
    src: url('./fonts/Wadik.otf');
}

@font-face {
    font-family: Montserrat;
    src: url('./fonts/Montserrat-Regular.otf');
}

/* No Select */

.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

input,
textarea,
button,
select,
a,
svg,
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::selection {
    background-color: #f7971e;
}

/* Loading Page */

.loadingPage {
    position: fixed;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    width: 100vw;
    height: 100vh;
    z-index: 90000000000000000000000000000000000000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Defaults */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #000000;
    font-size: 10px;
    color: #ffffff;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: #000000;
    box-sizing: border-box;
    z-index: 100;
    font-size: 10px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    font-family: Wadik;
}

.webgl {
    position: fixed;
    outline: none;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    z-index: 100000000;
    pointer-events: none;
}

main {
    position: absolute;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #ffffff;
}

/* Responsive */

/* Max-Width 1080px */

@media screen and (max-width: 1180px) {

    .dnToggleDiv {
        display: none;
    }
    
    .testimonialsButtonsMobileDiv {
        display: flex !important;
        background-color: transparent !important;
    }

    .cursorFollowerDiv {
        display: none !important;
    }

    .testimonialsSliderIndicatorsContainerDiv {
        display: none !important;
    }

    .classChoiceBottomButtons, .classChoiceTopButtons {
        margin-top: 0 !important;
        flex-direction: column !important;
    }

    .headerTextResponsive {
        font-size: 3.5rem !important;
    }

    .footerMiddleDiv {
        flex-direction: column !important;
    }

    .footerCompetitionsDiv {
        padding-left: 0 !important;;
        flex-direction: column !important;
    }

    .footerTrustPilotDiv {
        padding-right: 0 !important;
        border-right: none !important;
    }

    .footerCompetitionsText {
        width: 90vw !important;
        text-align: center !important;
    }

    .footerEmailSubmitDiv {
        width: 90vw !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    @media (orientation: portrait) {
        /* Portrait */
        
        .quickMenuSection {
            display: flex !important;
        }

        html {
            font-size: 10px;
        }

        .videoIframe {
            width: 90vw !important;
            height: calc(90vw * 37/65) !important;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
            text-align: center !important;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .questIntroTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .questIntroHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questIntroBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .questIntroVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .questIntroVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .fundingProcessBodyDiv {
            width: 90vw !important;
        }

        .fundingProcessScrollContainerDiv {
            margin-left: 966px;
        }

        .fundingProcessButtonsMobileDiv {
            display: flex !important;
        }
        
        .chooseChallengeHeaderDiv {
            width: 90vw !important;
        }

        .leaderboardsSectionTopDiv {
            flex-direction: column !important;
        }

        .leaderboardsTextDiv {
            width: 90vw !important;
            align-items: center !important;
            text-align: center !important;
        }

        .leaderboardsHeaderText {
            font-size: 2.5rem !important;
        }

        .leaderboardsHeaderDiv {
            justify-content: center !important;
        }

        .leaderboardsActualDiv {
            font-size: 1rem !important;
        }

        .leaderboardsDiv {
            width: min(90vw, 90rem) !important;
            padding: 0 !important;
        }

        .videosOverlaysBottomDiv {
            width: 300vw !important;
        }

        .videosBorderPhoto {
            width: 90vw !important;
        }

        .videoContainerDiv {
            width: 100vw !important;
        }

        .videosContainerVideoDiv {
            width: 100% !important;
            height: calc(27/48*90vw) !important;
        }

        .videoContainerBody {
            width: 90vw !important;
        }

        .videosButtonsMobileDiv {
            display: flex !important;
        }

        .comparisonsHeader {
            width: 90vw !important;
            text-align: center !important;
            font-size: 3.5rem !important;
        }

        .comparisonsActualContainerDiv {
            flex-direction: column !important;
        }

        .comparisonsTFTActualDiv {
            width: min(45rem, 90vw) !important;
        }

        .appShowcaseOverlaysDiv {
            justify-content: center !important;
        }

        .appShowcaseOverlaysActualRightDiv {
            padding-left: 0 !important;
            width: 100% !important;
            align-items: center !important;
        }

        .appShowcase8CapPhoto {
            width: 90vw !important;
        }

        .videosSection {
            flex-direction: column !important;
        }

        .faqScrollContainerDiv {
            justify-content: flex-start !important;
            align-items: center !important;
            flex-direction: column !important;
            height: 80rem !important;
        }

        .faqScrollTopTextDiv, .faqScrollBottomTextDiv {
            width: min(90vw, 50rem) !important;
        }

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .chooseChallengeTableDiv {
            width: 90vw !important;
        }

        .chooseChallengeScrollBodyDiv {
            width: 100vw !important;
        }

        .chooseChallengeColumnDiv {
            font-size: 1rem !important;
            padding: 1rem 1rem 1rem 1rem !important;
        }
        
        .chooseChallengeColumnBalanceDiv {
            font-size: 1rem !important;
        }

        .chooseChallengeColumn1 {
            padding-left: 0 !important;
        }

        #buyChallengeMobile {
            display: flex !important;
            margin-top: 2rem !important;
        }

        .classChoicesTopDiv {
            width: 62.5% !important;
            flex-direction: column !important;
        }

        .classPriceContainerDiv {
            width: 37.5% !important;
            flex-direction: column !important;
            margin-top: 0 !important;
        }

        .classChoiceAllButtonsDiv {
            flex-direction: row !important;
            width: 100vw !important;
        }

        .classPriceContainerDiv {
            margin-top: 0 !important;
        }

        .classPriceButton {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .classChoiceButton {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }

    }
      
    @media (orientation: landscape) {
        /* Landscape */

        html {
            font-size: 10px;
        }

        .videoIframe {
            width: 88vw !important;
            height: calc(90vw * 37/65) !important;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
            flex-direction: row-reverse !important;
            align-items: flex-start !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .questIntroTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .questIntroHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questIntroBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .questIntroVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .questIntroVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .fundingProcessBodyDiv {
            width: 90vw !important;
        }

        .fundingProcessScrollContainerDiv {
            margin-left: 966px;
        }

        .fundingProcessButtonsMobileDiv {
            display: flex !important;
        }
        
        .chooseChallengeHeaderDiv {
            width: 90vw !important;
        }

        .leaderboardsSectionTopDiv {
            flex-direction: column !important;
        }

        .leaderboardsTextDiv {
            width: 90vw !important;
            align-items: center !important;
            text-align: center !important;
        }

        .leaderboardsHeaderText {
            font-size: 2.5rem !important;
        }

        .leaderboardsHeaderDiv {
            justify-content: center !important;
        }

        .leaderboardsActualDiv {
            font-size: 1rem !important;
        }

        .leaderboardsDiv {
            width: min(90vw, 90rem) !important;
            padding: 0 !important;
        }

        .videosOverlaysBottomDiv {
            width: 300vw !important;
        }

        .videosBorderPhoto {
            width: 90vw !important;
        }

        .videoContainerDiv {
            width: 100vw !important;
        }

        .videosContainerVideoDiv {
            width: 100% !important;
            height: calc(27/48*90vw) !important;
        }

        .videoContainerBody {
            width: 90vw !important;
        }

        .videosButtonsMobileDiv {
            display: flex !important;
        }

        .comparisonsHeader {
            width: 90vw !important;
            text-align: center !important;
            font-size: 3.5rem !important;
        }

        .comparisonsActualContainerDiv {
            flex-direction: column !important;
        }

        .comparisonsTFTActualDiv {
            width: min(45rem, 90vw) !important;
        }

        .appShowcaseOverlaysDiv {
            justify-content: center !important;
        }

        .appShowcaseOverlaysActualRightDiv {
            padding-left: 0 !important;
            width: 100% !important;
            align-items: center !important;
        }

        .appShowcase8CapPhoto {
            width: 90vw !important;
        }

        .videosSection {
            flex-direction: column !important;
        }

        .faqScrollContainerDiv {
            justify-content: flex-start !important;
            align-items: center !important;
            flex-direction: column !important;
            height: 80rem !important;
        }

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .chooseChallengeTableDiv {
            width: 90vw !important;
        }

        .chooseChallengeScrollBodyDiv {
            width: 100vw !important;
        }

        .chooseChallengeColumnDiv {
            font-size: 1rem !important;
            padding: 1rem 1rem 1rem 1rem !important;
        }
        
        .chooseChallengeColumnBalanceDiv {
            font-size: 1rem !important;
        }

        .chooseChallengeColumn1 {
            padding-left: 0 !important;
        }

        #buyChallengeMobile {
            display: flex !important;
            margin-top: 2rem !important;
        }

        .classChoicesTopDiv {
            width: 62.5% !important;
            flex-direction: column !important;
        }

        .classPriceContainerDiv {
            width: 37.5% !important;
            flex-direction: column !important;
            margin-top: 0 !important;
        }

        .classChoiceAllButtonsDiv {
            flex-direction: row !important;
            width: 100vw !important;
        }

        .classPriceContainerDiv {
            margin-top: 0 !important;
        }

        .classPriceButton {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .classChoiceButton {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
    }

    /* Responsive Common */

}

#buyChallengeMobile {
    display: none;
}

.navBurgerMenuMobileDiv {
    position: fixed;
    z-index: 999999;
    display: none;
    width: 100vw;
    height: 10rem;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.navBurgerMenuButton {
    width: 10rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: auto;
}

.navSword1 {
    transform: scale(0.15);
    position: absolute;
}

.navSword2 {
    transform: scale(0.15);
    position: absolute;
}

/* Cursor Follower */
.cursorFollowerDiv {
    position: fixed;
    z-index: 9999999999999999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.cursorFollowerContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
}

.cursorFollower {
    position: absolute;
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dab661;
    opacity: 0;
}

.cursorFollowerSwords {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cursorFollowerSword1 {
    transform: scale(0.25);
}

.cursorFollowerSword2 {
    transform: scaleY(-0.25) scaleX(0.25);
    margin-top: -25rem;
}

/* Nav Bar */
.navBar {
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Wadik;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.navMenuDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.navMenu {
    margin-left: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navMenuText {
    pointer-events: auto;
    cursor: pointer;
    font-size: 1.5rem;
    text-shadow: 0 0 2px #000000;
}

.currentNavBackgroundPhoto {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.navMenuButton {
    pointer-events: auto !important;
    margin-left: -3rem;
    margin-right: 0 !important;
}

/* Mobile Menu */
.mobileMenuDiv {
    position: fixed;
    z-index: 999990;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    pointer-events: auto;
    display: none;
    padding-top: 12.5rem;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelection {
    font-size: 2.5rem;
    margin-right: 3.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mobileMenuSelectionDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelectionLink {
    text-decoration: none;
    color: #ffffff;
}

.chatBubbleContainerMobile {
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-left: 2rem;
}

/* Scroll Down Div */
.scrollDownDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    z-index: 9995;
}

.scrollDownScreenDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    pointer-events: none;
}

.scrollDownContainerDiv {
    width: 15rem;
    height: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2rem;
}

.scrollDownTextDiv {
    transform: rotateZ(90deg);
}

/* Chat Bubble Div */
.chatBubbleDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubbleMobileDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubblePhoto {
    cursor: pointer;
    pointer-events: auto;
}

.chatBubbleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chatBubbleText {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

.chatBubbleTextMobile {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

/* Hero Section */
.heroSection {
    position: relative;
    z-index: 900;
    width: 100vw;
    height: 100rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.heroBackgroundPhotoDay {
    filter: brightness(1.3);
}

.heroLayerPhotos {
    position: absolute;
    overflow: hidden;
}

.heroSunPhotoDiv {
    position: absolute;
    transform: translateX(-35rem) translateY(-80rem);
    filter: brightness(0.9);
    z-index: 400;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroFilterLayer {
    position: absolute;
    z-index: 300;
    width: 100vw;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
}

.heroImageLayersDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    transform: scale(1.01);
}

.heroMountainLayerPhoto {
    z-index: 1;
}

.heroCastleLayerPhoto {
    z-index: 2;
}

.heroFrontLayerPhoto {
    z-index: 3;
}

.heroMoonPhoto {
    position: absolute;
    z-index: 300;
}

.heroMoonDiv {
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

.heroHandPhotoDiv {
    position: absolute;
    transform: translateX(42vw) translateY(10vh);
    z-index: 400;
}

/* Hero Lottie Animations */

.lottieDiv {
    width: 100vw;
    height: 100%;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
}

.HeroDragon1LottieDiv, .HeroKnight1LottieDiv, .HeroKnight2LottieDiv {
    position: absolute;
}

.heroDragon1Lottie {
    transform: scaleX(-1.7) scaleY(1.7) translateX(30rem);
}

.heroKnight1Lottie {
    transform: scale(0.1) translateX(-300rem) translateY(330rem);
}

.heroKnight2Lottie {
    transform: scale(0.22) translateX(20rem) translateY(140rem);
}

.heroDragon1LottieDay {
    transform: scaleX(1) translateY(10rem);
}

.heroKnight1LottieDay {
    transform: scale(0.25) translateX(120rem) translateY(105rem);
}

.heroKnight2LottieDay {
    transform: scale(0.17) scaleX(-1) translateX(180rem) translateY(180rem);
}

/* Hero Overlays */

.heroOverlaysDiv {
    position: absolute;
    z-index: 3000;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroOverlaysContainerDiv {
    width: 100vw;
    padding-left: 15rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.heroHeaderDiv {
    width: 60rem;
    font-size: 6rem;
    line-height: 8rem;
}

.heroSubHeaderDiv {
    width: 60rem;
    font-size: 1.7rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.heroCTADiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.CTAButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right: 7rem;
    cursor: pointer;
    font-family: Wadik;
    pointer-events: none;
}

.CTAButtonText {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discordButtonLogoPhoto {
    margin-left: 1rem;
}

/* Quest Intro Section */

.questIntroSection {
    width: 100vw;
    background-image: linear-gradient(to bottom, #161621, 20%, #1a1926);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.questIntroTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 27rem;
}

.questIntroHeaderDiv {
    font-size: 5rem;
    width: 10rem;
    margin-bottom: 6.5rem;
}

.questIntroBodyDiv {
    font-size: 1.8rem;
    width: 52rem;
    font-family: Montserrat;
    line-height: 3rem;
}

.questVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}

.questIntroVideoDiv {
    background-color: black;
    width: 65rem;
    height: 37rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questIntroVideoBackgroundPhoto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.questIntroPurpleGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.questIntroPinkGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.questIntroPurpleGemDiv, .questIntroPinkGemDiv {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questIntroOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.questIntroTorchDiv {
    width: 27rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Funding Process Section */

.fundingProcessSection {
    position: relative;
    z-index: 1;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a1926;
    margin-top: -2px;
    padding-top: 5rem;
    text-align: center;
}

.fundingProcessOverlaysDiv {
    width: 100vw;
    height: 100%;
    position: absolute;
}

.fundingProcessContainerDiv {
    position: absolute;
    z-index: 10;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
}

.fundingProcessTextDiv {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fundingProcessHeaderDiv {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
}

.fundingProcessHeaderUnderlineDiv {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.fundingProcessBodyDiv {
    width: 80rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Montserrat;
    font-size: 1.8rem;
}

/* Funding Process Scrolls */

.fundingProcessScrollContainerDiv {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    margin-top: 7.5rem;
}

.fundingProcessScrollDiv {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-left: 5rem;
    margin-right: 5rem;
    cursor: pointer;
}

.fundingProcessScrollTopDiv {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fundingProcessScrollTopText {
    position: absolute;
    z-index: 1;
    color: #000000;
    font-size: 1.6rem;
}

.fundingProcessScrollBottomDiv {
    margin-top: 2rem;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}

.fundingProcessScrollBottomContainerDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.fundingProcessPhaseTextDiv {
    width: 24.5rem;
    text-align: center;
    position: absolute;
    z-index: 0;
    color: #000000;
    font-family: Montserrat;
    font-size: 1.5rem;
    margin-bottom: 7rem;
}

/* Funding Process Image Layers */

.fundingProcessImageLayersDiv {
    width: 100vw;
    height: 130rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.fundingProcessMistPhoto {
    position: absolute;
    transform: translateY(6vh);
}

.fundingProcessMoonPhoto {
    position: absolute;
    transform: translateX(5vw) translateY(-20vh);
}

.fundingProcessLayersDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fundingProcessWhiteGlowPhoto {
    position: absolute;
    z-index: 0;
    transform: translateY(-5vh);
}

.fundingProcessCastleDiv {
    position: absolute;
    z-index: 2;
}

.fundingProcessBackgroundPhoto {
    position: absolute;
    z-index: 3;
}

.fundingProcessMistDiv {
    position: absolute;
    z-index: 0;
}

.fundingProcessButtonDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-direction: column;
}

.fundingProcessButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    pointer-events: auto;
}

/* Mobile Only - Funding Process */
.fundingProcessButtonsMobileDiv {
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.fundingProcessBackButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-right: 2rem;
    pointer-events: auto;
}

.fundingProcessNextButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-left: 2rem;
    pointer-events: auto;
}

.fundingProcessBackButtonPhoto {
    transform: scale(0.35) rotateZ(-90deg);
}

.fundingProcessNextButtonPhoto {
    transform: scale(0.35) rotateZ(90deg);
}

/* Tiles Section */

.tilesSection {
    width: 100vw;   
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-85vh);
    pointer-events: none;
}

.tilesContainerSection {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tilesImageLayersDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.topTilesContainerDiv {
    height: 76rem;
    width: 100vw;
    filter: contrast(2.25) grayscale(0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.tilesContainerDiv {
    height: 108rem;
    width: 100vw;
    filter: contrast(2.25) grayscale(0.5);
    background-image: url('../images/Tiles.png');
    margin: none;
    padding: none;
    border: none;
    outline: none;
    background-position: center;
}

.tilesContainerBottomDiv {
    height: 108rem;
    width: 100vw;
    filter: contrast(2.25) grayscale(0.5);
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 1), 10%, rgba(0, 0, 0, 0)),
        url('../images/Tiles.png');
    margin: none;
    padding: none;
    border: none;
    outline: none;
    background-position: center;
}

/* Choose Challenge Section */

.chooseChallengeSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding-top: 5rem;
}

.chooseChallengeKnightLottieDay {
    position: absolute;
    z-index: -1;
    transform: scale(0.15) translateX(40rem) translateY(-120rem);
}

.chooseChallengeHeaderDiv {
    width: 55rem;
    text-align: center;
    font-size: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chooseChallengeHeaderTorchPhoto {
    position: absolute;
    z-index: -1;
    transform: translateY(-5vh);
}

.classChoicesContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 11rem;
}

.classChoicesTopDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.classChoiceTopButtons {
    display: flex;
    justify-content: center;
    align-items: center;
} 

.classChoiceBottomButtons {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.classChoiceButton {
    width: 27rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    font-size: 1.6rem;
    cursor: pointer;
}

.classChoiceButtonRectangles {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.chooseChallengeBackgroundPhoto {
    position: absolute;
    z-index: -1;
}

.classChoicesBottomDiv {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.classPriceContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8rem;
}

.classChoiceAllButtonsDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.classPriceButton {
    width: 13rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    font-size: 1.6rem;
    cursor: pointer;
    font-family: Montserrat;
    font-weight: bold;
    letter-spacing: 0.1rem;
    pointer-events: auto;
}

.classPriceText {
    padding-top: 0.6rem;
}

.choosePriceBackgroundPhoto {
    position: absolute;
    z-index: -1;
}

.chooseChallengeScrollDiv {
    margin-top: -5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.chooseChallengeScrollBodyDiv {
    height: 100rem;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    background-image: url('../images/ChooseChallengeScrollBody.png');
    background-position: center;
    background-repeat: no-repeat;
}

.chooseChallengeScrollLeftPhoto {
    transform: translateX(1rem);
    position: relative;
    z-index: 100;
}

.chooseChallengeScrollRightPhoto {
    transform: translateX(-1rem);
    position: relative;
    z-index: 100;
}

.chooseChallengeTableDiv {
    width: 55vw;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chooseChallengeRowDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chooseChallengeColumnDiv {
    font-size: 1.5rem;
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1.5rem 2rem 1.5rem 2rem;
    border-bottom: 1px solid #000000;
    font-family: Montserrat;
    color: #000000;
}

.chooseChallengeColumn2nd {
    background-color: #0000002a !important;
}

.chooseChallengeColumn3rd {
    background-color: #0000003a !important;
}

.chooseChallengeColumnBalanceDiv {
    width: 75% !important;
    height: 100%;
    text-align: center !important;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 1.5rem 2rem 1.5rem 2rem;
    font-family: Montserrat;
    color: #000000;
    font-size: 1.5rem;
    font-weight: bolder;
}

.chooseChallengeRow1 {
    font-family: Wadik !important;
}

.chooseChallengeColumnLastRow {
    border: none !important;
    padding: none !important;
    justify-content: center !important;
}

.chooseChallengeColumn234 {
    border-left: 1px solid #000000;
    background-color: #0000001a;
}

.fontWeightBold {
    font-weight: bolder !important;
}

.buyChallengeButtonContainerDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buyChallengeButton {
    width: 17rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
}

.buyChallengeText {
    font-size: 1.1rem;
    font-family: Wadik;
    color: #ffffff;
    position: absolute;
    z-index: 1;
}

.buyChallengeColumnDiv {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.chooseChallengeColumnLastRow234 {
    height: 100% !important;
    border-left: 1px solid #000000;
    border-bottom: none !important;
}

.borderNone {
    border: none !important;
}

.chooseChallengeOverlaysDiv {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.chooseChallengeTorchDiv {
    width: 27rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chooseChallengeTorch {
    scale: 1.4;
}

/* Leaderboards Section */

.leaderboardsSection {
    position: relative;
    z-index: 9991;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 5rem;
}

.leaderboardsSectionTopDiv {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.leaderboardsDiv {
    width: 90rem;
    height: 55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-left: 5rem;
    padding-right: 5rem;
}

.leaderboardsHeaderDiv {
    width: 100%;
    height: 15rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 3rem;
}

.leaderboardsCrownPhoto, .leaderboardsCrownHeaderPhoto {
    margin-right: 2rem;
}

.leaderboardsActualDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    font-size: 2rem;
}

.leaderboardsActualRowDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.leaderboardsActualRowRankDiv {
    width: 15%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowNameDiv {
    width: 40%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowReturnDiv {
    width: 22.5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowProfitDiv {
    width: 22.5%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.leaderboardsTopPlayerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerAnimateDiv {
    display: flex;
    justify-content: center;
    align-items: center; 
}

.leaderboardsBackgroundPhoto {
    position: absolute;
    z-index: -2;
    margin-top: 0.5rem;
}

.leaderboardsBorderPhoto {
    position: absolute;
    z-index: -1;
}

.leaderboardsTopPlayerOverlaysDiv {
    width: 25rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
}

.leaderboardsTopPlayerFramePhoto {
    position: absolute;
    z-index: 2;
}

.leaderboardsTopPlayerSwordLeftPhoto {
    position: absolute;
    z-index: 0;
    transform: translateX(-8rem);
}

.leaderboardsTopPlayerSwordRightPhoto {
    position: absolute;
    z-index: 0;
    transform: translateX(8rem);
}

.leaderboardsTopPlayerProfilePhotoDiv {
    position: absolute;
    z-index: 1;
    width: 15.5rem;
    height: 15.5rem;
    background-color: #000000;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerTextDiv {
    width: 100%;
    position: absolute;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerNameDiv {
    position: absolute;
    z-index: 5;
    transform: translateY(12.5rem);
    font-size: 1.6rem;
}

.leaderboardsTopPlayerStreakDiv {
    position: absolute;
    z-index: 5;
    transform: translateY(20rem);
    font-size: 1.6rem;
}

.leaderboardsSectionBottomDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12rem;
}

.leaderboardsButton {
    width: 32rem;
    height: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    cursor: pointer;
}

.leaderboardsButtonText {
    margin-top: 0.6rem;
}

.leaderboardsButtonBackgroundPhoto {
    position: absolute;
    z-index: -1;
}

.leaderboardsTextDiv {
    width: 66rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
}

.leaderboardsTextHeader {
    font-size: 4rem;
    margin-bottom: 5rem;
}

.leaderboardsTextBody {
    font-size: 1.6rem;
    font-family: Montserrat;
    line-height: 2.2rem;
}

.leaderboardsOverlaysDiv {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.leaderboardsTorchDiv {
    width: 27rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTorch {
    scale: 1.4;
}

.leaderboardsGreenGem, .leaderboardsYellowGem {
    position: absolute;
    z-index: -3;
    display: flex;
    justify-content: center;
    align-content: center;
}

.leaderboardsGreenGemPhoto {
    position: absolute;
    z-index: -3;
    transform: translateX(-47rem) translateY(5rem);
}

.leaderboardsYellowGemPhoto {
    position: absolute;
    z-index: -3;
    transform: translateX(47rem) translateY(42rem);
}

/* Competition Countdown Section */

.competitionCountdownSection {
    position: relative;
    z-index: 999;
    padding-top: 5rem;
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    color: #000000;
    padding-bottom: 5rem;
}

.competitionCountdownScrollPhoto {
    position: absolute;
    z-index: -1;
}

.competitionHeaderDiv {
    color: #ffffff;
    text-align: center;
    font-size: 4rem;
}

.competitionCountdownScrollDiv {
    width: 30rem;
    height: 65rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
}

.competitionContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.competitionCountdownTimerDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.competitionCountdownTimerActual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.competitionCountdownTimerActualTop {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.competitionCountdownTimerDayDiv, .competitionCountdownTimerHourDiv, .competitionCountdownTimerMinDiv, .competitionCountdownTimerSecDiv {
    width: 25%;
}

.competitionCountdownScrollMonth {
    font-size: 2.6rem;
}

.competitionCountdownContestantCount {
    font-size: 1.8rem;
}

.competitionCountdownPrize {
    font-size: 1.5rem;
    font-family: Montserrat;
    font-weight: bold;
}

.competitionCountdownTimerHeader {
    font-size: 1.5rem;
}

.competitionCountdownTimerActualTop {
    font-size: 2.8rem;
    margin-top: 2rem;
}

.competitionCountdownTimerDayLabel, .competitionCountdownTimerHourLabel, .competitionCountdownTimerMinLabel, .competitionCountdownTimerSecLabel {
    font-size: 1rem;
}

.countdownCompetitionDetailsHeader {
    font-size: 1.8rem;
}

.countdownCompetitionDetailsBody {
    font-size: 1.4rem;
    font-family: Montserrat;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.countdownCompetitionRulesLink, .countdownCompetitionRegisterLink {
    font-size: 1.5rem;
    color: #000000;
    margin-bottom: 1.5rem;
}

.countdownCompetitionStandingsLink {
    font-size: 1.5rem;
    color: #000000;
}

.competitionCountdownUnderlinePhoto {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.competitionCountdownPrize {
    margin-top: 2rem;
}

.competitionCountdownSword1Photo {
    position: absolute;
    z-index: -2;
}

.competitionCountdownSword2Photo {
    position: absolute;
    z-index: -2;
}

.competitionCountdownSword3Photo {
    position: absolute;
    z-index: -2;
}

.competitionCountdownSword4Photo {
    position: absolute;
    z-index: -2;
}

.spaceRocksPhoto {
    position: absolute;
    z-index: -2;
    transform: translateY(-15rem);
    pointer-events: none;
}

.registerButtonText {
    margin-top: 0.3rem !important;
    font-size: 1.5rem !important;
}

/* Comparisons Section */

.comparisonsSection {
    position: relative;
    z-index: 990;
    width: 100vw;
    height: 154.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    margin-top: -2px;
    background-color: #a49db9;
}

.comparisonsKnightLottie {
    position: absolute;
    z-index: 0;
    transform: scale(0.3) translateX(28rem) translateY(75rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comparisonsDayDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

.comparisonsDayGradient {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #15543e, 50%, #40487e);
    margin-bottom: -2px;
}

.comparisonsHeader {
    position: relative;
    z-index: 99999;
    color: #ffffff;
    font-size: 4rem;
    margin-bottom: 10rem;
}

.comparisonsBackgroundDiv {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), 30%, rgba(0, 0, 0, 0)), url('../images/ComparisonsBackground.png');
    display: flex;
    justify-content: center;
    align-items: center;
}

.comparisonsContainerDiv {
    position: absolute;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.comparisonsActualContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comparisonsCompetitorButtonsDiv {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.comparisonsCompetitorButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 4rem;
    margin-right: 4rem;
}

.comparisonsCompetitorButtonText {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    font-size: 1.3rem;
    font-family: Montserrat;
}

.comparisonsTFTDiv, .comparisonsCompetitorDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comparisonsTFTActualDiv {
    width: 45rem;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Montserrat;
    color: #ffffff;
}

.comparisonsTFTHeader {
    width: 100%;
    text-align: center;
    font-family: Wadik;
    font-size: 2.6rem;
    margin-bottom: 4rem;
}

.comparisonsTFTActualRowDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff3a;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.comparisonsTFTActualRowLabel {
    text-align: left;
    font-size: 1.4rem;
    font-weight: bold;
}

.comparisonsTFTActualRowValue {
    text-align: right;
    font-size: 1.4rem;
}

.comparisonsAnimateDiv1, .comparisonsAnimateDiv2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spearGlowPhoto {
    position: absolute;
    z-index: 2;
    transform: translateX(-224px) translateY(1176px);
    filter: contrast(0.3);
}

.doorGlowPhoto {
    position: absolute;
    z-index: 2;
    transform: translateX(215px) translateY(930px);
    filter: contrast(1) brightness(1);
}

/* App Showcase Section */

.appShowcaseSection {
    position: relative;
    z-index: 900;
    width: 100vw;
    height: 140rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
    background-color: #530d36;
}

.appShowcaseBackgroundPhoto {
    transform: translateY(20rem);
    z-index: -1;
}

.appShowcaseBackgroundPhotoDay {
    transform: translateY(-30rem);
    z-index: -1;
}

.appShowcaseTransition {
    position: absolute;
    z-index: 0;
    width: 100vw;
    height: 20rem;
    background-image: linear-gradient(to bottom, #420a2b, 50%, #580e3800);
}

.appKnightLottieDiv {
    position: absolute;
    z-index: 0;
    transform: scale(0.3) translateX(210rem) translateY(90rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

.appShowcaseOverlaysDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.appShowcaseOverlaysHeader {
    font-size: 4rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.appShowcaseOverlaysActualDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.appShowcaseOverlaysActualLeftDiv {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.appShowcaseOverlaysActualRightDiv {
    padding-top: 4rem;
    padding-left: 4rem;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.appShowcaseMobilePhoto {
    position: absolute;
    z-index: 2;
}

.appShowcaseOverlaysActualRightButtonsDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.appShowcaseButtonApplePhoto {
    border: 1px solid #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    margin-right: 3rem;
    cursor: pointer;
}

.appShowcaseButtonGooglePhoto {
    border: 1px solid #ffffff;
    border-radius: 1rem;
    padding: 1rem 0.5rem 1rem 0.5rem;
    background-color: #000000;
    cursor: pointer;
}

.appShowcaseOverlaysActualRightLogosDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.appShowcase8CapPhoto {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.appShowcaseAppLogo2Photo {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.appShowcaseMobilePhoto {
    transform: translateX(-37.5rem) translateY(40rem);
}

.appShowcasePurpleGemPhoto {
    position: absolute;
    z-index: 0;
    transform: translateY(50rem);
}

.appShowcaseYellowGemPhoto {
    position: absolute;
    z-index: 0;
    transform: translateX(-45rem) translateY(10rem);
}

.appShowcaseMobileDiv {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.appShowcasePadDiv {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.appShowcasePurpleGem, .appShowcaseYellowGem {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    transform: translateX(-5rem);
}

.appShowcaseTextRightContainer {
    height: 9.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    font-family: Montserrat;
    font-weight: bold;
    font-size: 1.9rem;
    margin-right: 5rem;
}

.appShowcaseTextRightBottom {
    margin-top: 0rem;
}

/* Videos Section */

.videosSection {
    position: relative;
    z-index: 9990;
    width: 100vw;
    padding-bottom: 5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    background-color: #530d36;
    color: #000000;
}

.videosOverlaysDiv {
    width: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
}

.videosHeader {
    text-align: center;
    font-size: 4rem;
    margin-bottom: 5rem;
}

.videosOverlaysBottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.videoContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.videoContainerActualDiv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.videosContainerVideoDiv {
    position: absolute;
    z-index: -1;
    background-color: #000000;
    width: 48rem;
    height: 27.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.videoContainerHeader {
    font-size: 3rem;
    margin-top: 3rem;
    margin-bottom: 5rem;
}

.videoContainerBody {
    width: 48rem;
    font-family: Montserrat;
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: 4.5rem;
}

.videosBlueGemPhoto {
    position: absolute;
    z-index: -2;
    transform: translateX(-30rem) translateY(-10rem);
}

.videosYellowGemPhoto {
    position: absolute;
    z-index: -2;
    transform: translateX(32rem) translateY(15rem);
}

/* Mobile Only - Videos */
.videosButtonsMobileDiv {
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.videosBackButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-right: 2rem;
    pointer-events: auto;
}

.videosNextButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-left: 2rem;
    pointer-events: auto;
}

.videosBackButtonPhoto {
    transform: scale(0.35) rotateZ(-90deg);
}

.videosNextButtonPhoto {
    transform: scale(0.35) rotateZ(90deg);
}

/* Mobile Only - Testimonials */
.testimonialsButtonsMobileDiv {
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.testimonialsBackButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-right: 2rem;
    pointer-events: auto;
}

.testimonialsNextButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-left: 2rem;
    pointer-events: auto;
}

.testimonialsBackButtonPhoto {
    transform: scale(0.35) rotateZ(-90deg);
}

.testimonialsNextButtonPhoto {
    transform: scale(0.35) rotateZ(90deg);
}

/* Discord Section */

.discordSection {
    position: relative;
    z-index: 9991;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding-top: 5rem;
    background-image: linear-gradient(to bottom, #530d36, 80%, #383764);
    padding-bottom: 2.5rem;
}

.discordHeader {
    font-size: 4rem;
    margin-top: 2rem;
    margin-bottom: 14rem;
}

.discordImageDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.discordImageContainerAnimate {
    display: flex;
    justify-content: center;
    align-items: center;
}

.discordImageContainer {
    position: absolute;
    z-index: -1;
    width: 79rem;
    height: 57rem;
    border-radius: 4rem;
    transform: translateY(-1rem);
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.discordActualPhoto {
    width: 100%;
}

.discordGlowPhoto {
    position: absolute;
    z-index: -3;
}

.discordKnightLottie {
    position: absolute;
    z-index: -1;
    transform: scaleY(0.6) scaleX(-0.6) translateX(120rem) translateY(-5rem);
}

.discordTextLogoPhoto {
    position: absolute;
    z-index: -2;
    transform: translateY(-15rem);
}

/* FAQ Section */

.faqSection {
    position: relative;
    z-index: 850;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-color: #2a2344;
    overflow: hidden;
    margin-top: -2px;
}

.faqDayFilter {
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, #00000000, 80%, #000000);
    pointer-events: none;
}

.FAQLogoPhoto {
    padding-top: 2.5rem;
}

.faqHeader {
    font-size: 4rem;
    margin-top: 4rem;
    margin-bottom: 7rem;
}

.faqBackgroundDiv {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.FAQBackgroundPhoto {
    height: 100%;
}

.FAQBackgroundDayPhoto {
    position: absolute;
    z-index: -1;
}

.faqScrollContainerDiv {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 50rem;
}

.faqScrollContainerLeftDiv , .faqScrollContainerRightDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-left: 5rem;
    margin-right: 5rem;
}

.faqScrollDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.faqScrollTopDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.faqScrollTopTextDiv {
    width: 50rem;
    position: absolute;
    z-index: 1;
    color: #000000;
    font-size: 1.6rem;
    text-align: left;
}

.faqScrollBottomContainerDiv {
    position: relative;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    transform: translateY(-1rem);
}

.faqScrollBottomDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.faqScrollBottomTextDiv {
    width: 45rem;
    position: absolute;
    z-index: 1;
    color: #000000;
    font-family: Montserrat;
    font-size: 1.5rem;
    margin-bottom: 6rem;
}

.faqButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5rem
}

.faqButtonText {
    position: absolute;
    z-index: 1;
    text-align: center;
    font-size: 1.6rem;
}

/* Testimonials Section */

.testimonialsSection {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    pointer-events: none;
}

.testimonialsHeader {
    font-size: 4rem;
    margin-top: 2rem;
}

.testimonialsSliderContainerDiv {
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.testimonialsSliderDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.testimonialsCardDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3rem;
    margin-right: 3rem;
}

.testimonialsSliderIndicatorsContainerDiv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.testimonialsIndicatorDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.testimonialsIndicator {
    position: absolute;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #dab661;
    opacity: 0;
}

.testimonialsCardTextDiv {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30rem;
}

.testimonialsCardTextHeader {
    font-size: 2.4rem;
}

.testimonialsCardTextBody {
    font-size: 1.5rem;
    font-family: Montserrat;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.testimonialsCardTextRating {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonialsStarPhoto {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* News Section */

.newsSection {
    height: none !important;
    background-image: linear-gradient(to bottom, #2e1f3f, 50%, #10064d);
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.newsButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 5rem;
    pointer-events: auto;
}

.newsButtonText {
    position: absolute;
    z-index: 1;
    font-size: 1.6rem;
}

.newsRedGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.newsYellowGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.newsRedGem, .newsYellowGem {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contact Section */

.contactSection {
    position: relative;
    z-index: 875;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to top, #401639, 60%, #10064d);
    padding-top: 5rem;
}

.contactBackgroundDiv {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}

.contactEmailLinkText {
    color: #ffffff;
    /* text-decoration: none; */
}

.contactButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
}

.contactButtonText {
    position: absolute;
    z-index: 1;
}

.contactSocialsDiv {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 2rem;
    margin-bottom: 10rem;
}

.contactSocialsPhoto {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    cursor: pointer;
}

.contactHeader {
    font-size: 5rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.contactAddressHeader, .contactEmailHeader, .contactPhoneHeader {
    font-size: 2.6rem;
}

.contactAddressBody, .contactEmailBody, .contactPhoneBody {
    font-size: 1.8rem;
    font-family: Montserrat;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.footerKnightLottie  {
    position: absolute;
    transform: scale(0.5) translateY(42rem) translateX(-100rem);
    pointer-events: none;
}

/* Footer Section */

.footerSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to bottom, #4e1137, 30%, #3e0a3d);
}

.footerContainerDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.footerLinksContainerDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerLinkText {
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.footerTrustPilotDiv {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 5rem;
    border-right: 1px solid #ffffff3a;
}

.footerTrustPilotRatingDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #ffffff;
    font-family: Montserrat;
    font-size: 1rem;
}

.footerRatingLinkText {
    color: #ffffff;
}

.footerTextDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerText {
    text-align: left;
    font-family: Montserrat;
    font-size: 1.2rem;
}

.footerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 5rem;
}

.footerButtonText {
    position: absolute;
}

.footerBottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15rem;
    padding-right: 15rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 5rem;
}

.footerBottomLinkText {
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
}

.footerLogoPhoto {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.footerMiddleDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerCompetitionsText {
    font-size: 1.2rem;
    text-align: left;
    line-height: 2rem;
}

.footerEmailSubmitDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ffffff5a;
}

.footerCompetitionsDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 5rem;
}

.footerEmailInput {
    width: 40rem;
    height: 3.5rem;
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding-left: 1rem;
}

.footerEmailSubmitButton {
    height: 4rem;
    width: 10rem;
    font-family: Montserrat;
    color: #f7971e;
    font-weight: bolder;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    margin-left: 2px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Torch Glow */

.torchGlow {
    position: absolute;
    z-index: -3;
    background-color: #ff4202;
    box-shadow: 0 0 6.5rem 6.5rem #ff4202;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

/* Video IFRAME */

.videoIframe {
    cursor: pointer;
    pointer-events: auto;
    width: 65rem;
    height: 37rem;
    border: none;
    outline: none;
}

/* Current Link Text */

.currentLinkText {
    color: #f7971e !important;
}

/* Quick Menu Section */

.quickMenuSection {
    position: fixed;
    z-index: 99990;
    top: calc(100vh - 10rem);
    display: none;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 10rem;
}

.quickMenuOverlaysDiv {
    position: absolute;
    top: 0.75rem;
    width: 100%;
    height: 9.25rem;
    background-color: #092236;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quickMenuButtonDiv {
    width: calc(100%/3);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding-inline: 1rem;
}

.quickMenuBorder {
    border-right: 1px solid #ffffff3a;
}

.quickMenuSquaresPhoto {
    position: absolute;
    transform: translateY(-5rem);
    pointer-events: none;
}

.quickMenuLinkBox {
    width: calc(100vw/3);
    height: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* D/N Toggle */

.dnToggleDiv {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translateX(-15rem);
}

.dnToggleMobileDiv {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 99999999;
}

.dnSliderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
}

.dnSliderBody {
    position: relative;
    width: 8rem;
    height: 4rem;
    border-radius: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 5px 1px #0000005a;
    background-color: #092236;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.dnButtonBody {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #FEFCD7;
    border-radius: 50%;
    transform: translateX(2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.crescentBody {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: #092236;
    transform: translateX(-0.7rem);
}

.stars {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.star1 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-0.5rem) translateY(-0.7rem);
    border-radius: 50%;
}

.star2 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-2rem) translateY(0.65rem);
    border-radius: 50%;
}

.star3 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(0.5rem) translateY(0rem);
    border-radius: 50%;
}

.cloud {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.cloud1 {
    position: absolute;
    width: 2.5rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.8rem);
}

.cloud2 {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.5rem) translateY(-0.5rem);
}

.cloud3 {
    position: absolute;
    width: 3.75rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.7rem) translateY(0.5rem);
}

/* D/N Toggle */
.day {
    opacity: 0;
    display: none;
}

.treeBranch1 {
    transform: translateY(-50rem);
}

.treeBranch2 {
    transform: scaleX(-1) translateY(-20rem);
}