:root {
        --navHeight: max(7vh, 40px);
        --contentWidth: 64vw;
        --minContentWidth: 300px;
        --white: #fff;
        --lightgrey: #ccc;
        --grey: #6c6c6c;

        --intro-time: 2s;

        --marginWidth: calc((100vw - var(--contentWidth)) / 2);
}

body {
        color: var(--foregroundColour);
        font-size: 1.25rem;
        background-color: var(--backgroundColour);
}

@media screen and (max-width: 900px) {
        body {
                font-size: 1.1rem;
        }
}

h1 {
        font-size: 2.7rem;
        width: 100%;
}

@media screen and (max-width: 650px) {
        h1{
                font-size: 2rem;
        }
}

#small-cta {
        font-size: 1.5rem;
        padding: 0 3rem;
}

#large-cta {
        max-width: 100vw;
        margin: 0;
        padding: 15vh 0;

        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
}

/* NAV BAR */
#nav {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 5;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        width: var(--contentWidth);
        height: var(--navHeight);
        padding: 0 var(--marginWidth);
}

#darkToggle {
        height: fit-content;
        padding: 5px;
}

#nav.loaded{
        animation: sink-down var(--intro-time) ease-in-out forwards;
}

@keyframes sink-down {
        from {
                transform: translateY(-var(--navHeight));
        }
        to {
                transform: 0;
        }
}

#nav-logo {
        vertical-align: middle;
        margin-block: auto;
        max-height: calc(var(--navHeight) * 0.6);
        max-width: 30vw;
}

section div {
        border-radius: 18px;
}

/* COVER SECTION */
#cover {
        background-image: url("/imgs/index/cover/bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        color: white;

        height: 100vh !important;
        max-width: 100vw;
        margin: 0;

        justify-content: end;
}

#cover h1 {
        padding-bottom: 10vh;
}

.slide-in {
        translate: 0;
}

.slide-in.loaded {
        animation: content-slide var(--intro-time) ease-out forwards;
}

@keyframes content-slide {
        0% {
                translate: 0 80vh;
        }
        100%{
                translate: 0;
        }
}

/* Highlights */
#highlights {
        min-height: 80vh;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        font-size: 1.5rem;
        margin-block: 10%;
}

#highlights h1 {
        min-width: var(--minContentWidth);
        max-width: 40vw;
        margin-inline: 10vw;
}

.fade-in {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.show {
        opacity: 1;
        transform: translateY(0);
}

/* Sharing */

#sharing {
        align-items: center;
        justify-content: center;

        min-height: 90vh;
        margin-bottom: 15vh;
        box-sizing: border-box;
        overflow: visible !important;
}

#sharing h1 {
        margin-bottom: 0;
}

#sharing div {
        position: relative;
        margin-top: 2vh;
        height: 30vh;
        width: 100%;
}

#sharing img {
        position: absolute;
        left: 41%;
        width: 18%;
}

#nfc {
        height: 90vh;
        margin-bottom: 2vh;
        flex-direction: row;
        gap: 20px;
}

/* Benefit Carousel */

#deepDives {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        gap: 25px;
        margin-bottom: 25px;
}

.full, .half div {
        width: 100%;
}

.half {
        max-width: calc(50% - 12.5px);
}

.full div, .full img {
        max-width: 40%;
}

.full img {
        max-height: 95%;
        margin: 10px;
}

@media screen and (max-width: 900px) {
        .full div, .full img, .half {
                max-width: 100%;
        }
}

#deepDives div {
        box-sizing: border-box;
        padding: 5%;

        align-items: center;
        justify-content: center;
        
        scroll-snap-align: center;

        background: var(--white);
        color: var(--foregroundColour);
        position: relative;
}

#deepDives * p, #deepDives * ul {
        color: var(--grey);
}

#deepDives div div {
        display: block;
}

#deepDives::-webkit-scrollbar,
#deepDives::-webkit-scrollbar-thumb,
#deepDives::-webkit-scrollbar-track {
        width: 0;
        height: 0;
        background: transparent;
}