/* 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;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* 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: #0f0022;
    font-size: 10px;
    color: #ffffff;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: #0f0022;
    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;
    }

    .blogArticleDescription {
        display: none !important;
    }

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

    .blogBorderLargePhoto {
        width: 90vw !important;
    }

    .featuredBlogOverlays {
        width: 90vw !important;
        height: calc(61.5/108*90vw) !important;
    }

    .blogBackgroundLargeTextDiv {
        padding: 2rem !important;
    }

    .blogBackgroundLargeTextName {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
    }
    
    .blogBackgroundLargeTextDescription {
        display: none !important;
    }

    .filterHeader {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
        margin-right: 0rem !important;
        width: 100% !important;
    }

    .filterSectionTop {
        flex-direction: column !important;
        padding: 5vw !important;
    }

    .filterButtonContainer {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .filterSectionBottom {
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        height: 1rem;
    }

    .displaySectionContainer {
        width: 100vw !important;
    }

    .blogTorchDiv {
        display: none !important;
    }

    .blogBorderSmallPhoto {
        width: 90% !important;
    }
    
    .blogThumbnailOverlays {
        width: min(44vw, 54rem) !important;
        height: min(calc(44vw * 34/60), calc(54rem * 34/60)) !important;
    }

    .blogBottomDiv {
        width: 100% !important;
        padding-left: 2.5vw !important;
    }

    .blogArticleName {
        font-size: 2rem !important;
        line-height: 3.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .blogArticleDescription {
        font-size: 1.4rem !important;
        line-height: 2rem !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 */

        .blogDisplaySection {
            height: 95rem !important;
        }
    
        .blogCard {
            width: 50% !important;
            height: calc(95rem/3) !important;
            margin-block: 0 !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;
        }

        .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;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .reverseSection {
            padding-top: 0 !important;
        }

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

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

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

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

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

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
            padding-top: 0 !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;
            margin-right: 0 !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: 90vw !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;
        }

        .contactOverlaysText {
            width: 90vw !important;
        }

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

        .blogDisplaySection {
            height: 120rem !important;
        }
    
        .blogCard {
            width: 50% !important;
            height: calc(120rem/3) !important;
            margin-block: 0 !important;
        }

        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;
        }

        .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;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .reverseSection {
            padding-top: 0 !important;
        }

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

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

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

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

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

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }  

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
            padding-top: 0 !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;
            margin-right: 0 !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;
        }

        .contactOverlaysText {
            width: 90vw !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: 9999;
}

.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;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.heroFrontPhoto {
    position: absolute;
    z-index: 10;
    transform: translateX(21rem) translateY(7rem);
}

.heroFilterLayer {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #ffffff00, 60%, #0f0022);
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroImageLayer {
    height: 95.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: translateY(-10px);
}

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

.heroDragon1Lottie {
    transform: scale(2.25) translateY(-22rem) translateX(10rem);
}

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

.heroKnight2Lottie {
    transform: scaleY(0.25) scaleX(-0.25) translateY(-70rem) translateX(70rem);
}

.heroSkyPhoto {
    position: absolute;
}

.heroBackgroundPhoto {
    position: relative;
    z-index: 3;
}

/* Hero Overlays */

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

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

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

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

.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;
}

/* Featured Section */
.featuredSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: -40rem;
}

.featuredSectionHeader {
    text-align: center;
    font-size: 3rem;
    line-height: 5.3rem;
}

.featuredBlog {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.featuredBlogOverlays {
    position: absolute;
    width: 108rem;
    height: 61.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0a0a0a;
}

.blogBorderLargePhoto {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.blogBackgroundLargePhoto {
    position: absolute;
}

.blogBackgroundLargeTextDiv {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    padding: 4rem;
    background-image: linear-gradient(to bottom, #00000000, #000000);
    cursor: pointer;
    pointer-events: auto;
}

.blogBackgroundLargeTextName {
    font-size: 2.6rem;
    line-height: 5.3rem;
}

.blogBackgroundLargeTextDescription {
    font-size: 1.8rem;
    line-height: 3rem;
    font-family: Montserrat;
}

.questIntroPurpleGemPhoto {
    position: absolute;
    transform: translateX(-55rem) translateY(-25rem);
}

.questIntroPinkGemPhoto {
    position: absolute;
    transform: translateX(55rem) translateY(29rem);
}

.featurePurpleGem, .featurePinkGem {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Filter Section */

.filterSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.filterSectionTop {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}

.filterHeader {
    font-size: 2rem;
    line-height: 5.3rem;
    margin-right: 3rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.filterDropdownOverlays {
    position: absolute;
    width: 30rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.filterArrowPhoto {
    position: absolute;
    margin-left: 24rem;
}

.filterDropdownText {
    font-size: 1.4rem;
}

.filterSectionBottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
}

.filterCategoryDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: 1rem;
}

.filterCategoryText {
    font-size: 1.2rem;
}

/* Blog Display Section */

.blogDisplaySection {
    position: relative;
    width: 100vw;
    height: 173.7rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin-top: -3rem;
    background-image: linear-gradient(to bottom, #00000000, 90%, #10064d);
}

.displaySectionContainer {
    width: 138rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.blogCard {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-block: 3rem;
}

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

.blogBorderSmallPhoto {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

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

.blogThumbnailOverlays {
    position: absolute;
    z-index: 0;
    width: 60.75rem;
    height: 34.25rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.blogThumbnailFilter {
    position: absolute;
    width: 100%;
    height: 100%;
}

.blogBottomDiv {
    height: auto;
    width: 61rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.blogTextDiv {
    height: auto;
    margin-right: 2rem;
}

.blogArticleName {
    font-size: 2.2rem;
    line-height: 5.3rem;
}

.blogArticleDescription {
    font-size: 1.6rem;
    line-height: 2.5rem;
    font-family: Montserrat;
}

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

/* Display Buttons Section */

.displayButtonsSection {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background-color: #10064d;
}

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

.indexIndicatorPhoto {
    margin-inline: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.displayLeftArrowPhoto, .displayRightArrowPhoto {
    margin-inline: 0.75rem;
    cursor: pointer;
}

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

.indexNumber {
    font-size: 1.4rem;
    position: absolute;
}

/* Contact Section */

.contactSection {
    position: relative;
    z-index: 990;
    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);
}

/* 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 2rem 2rem #ff4202;
    width: 1rem;
    height: 1rem;
    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;
}

/* Reverse Torch Div */

.reverseTorchDiv {
    justify-content: flex-start !important;
}

/* 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);
}

/* 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;
}