:root {
    --flow: 1rem;

    --fs-100: clamp(0.6944rem, 0.684rem + 0.0465vw, 0.72rem);
    --fs-200: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
    --fs-300: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --fs-400: clamp(1.2rem, 1.1156rem + 0.375vw, 1.4063rem);
    --fs-500: clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
    --fs-600: clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
    --fs-700: clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
    --fs-800: clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);

    --clr-container: hsl(120, 26%, 29%);
    --clr-container-alt: hsl(45, 37%, 63%);
    --clr-background-alt: hsl(45, 25%, 98%);
    --clr-primary: hsl(120, 26%, 29%);
    --clr-primary-alt: hsl(45, 72%, 86%);
    --clr-accent: hsl(45, 100%, 41%);
}

@layer reset {
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        font: inherit;
        box-sizing: border-box;
    }
    
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    }

    h1, h2, h3 {
        line-height: 1.1;
        text-wrap: balance;
    }

    p, span, li {
        max-width: 65ch;
        line-height: 1.5;
        text-wrap: pretty;
    }

    img, video, picture, svg {
        display: block;
        max-width: 100%;
        border-radius: .5rem;
    }

    ul, ol {
        list-style-type: none;
    }

    a {
        color: black;
        text-decoration: none;
    }

    button {
        border: none;
        background: none;
    }
}

@layer base {
    /************************* HEADER *************************/
    header {
        color: white;
        background-color: var(--clr-container);
    }

    .nav-link {
        color: white;
    }

    .nav-link:hover {
        color: var(--clr-accent);
    }

    .nav-button {
        color: black;
        border-radius: .5rem;
        background-color: var(--clr-primary-alt);
    }

    .nav-button:hover {
        color: white;
        background-color: var(--clr-accent);
    }

    @media (width < 600px){
        .nav-menu-button {
            color: white;
        }

        .nav-link {
            color: black;
        }

        .nav-list {
            transition: all;
            background-color: var(--clr-container-alt);
        }

        .nav-button {
            color: white;
            background-color: var(--clr-container);
        }
    }
    /************************* HEADER *************************/


    /************************* HERO SECTION *************************/
    .hero-section {
        color: white;
        background-color: var(--clr-container);
    }
    /************************* HERO SECTION *************************/
    

    /*********************************************** PARTNERS **************************************/
    .scroller[data-animated="true"]{
        mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
    }

    .scroller[data-animated="true"] .scroller-inner {
        animation: scroll 20s linear infinite;
    }
    /*********************************************** PARTNERS **************************************/


    /************************* STATS SECTION *************************/
    .stat {
        text-align: center;
        border-radius: .5rem;
        background-color: var(--clr-container-alt);
    }
    /************************* STATS SECTION *************************/


    /************************* MISSION SECTION *************************/
    .missions-section {
        background-color: var(--clr-container);
    }

    .missions-section h2 {
        color: white;
    }

    .mission {
        border-radius: .5rem;
        background-color: white;
    }
    /************************* MISSION SECTION *************************/


    /************************* CTA SECTION *************************/
    .cta-section .wrapper {
        color: white;
        border-radius: .5rem;
        background-color: var(--clr-container);
    }
    /************************* CTA SECTION *************************/


    /************************* CONTACT SECTION *************************/
    .contact-profile {
        border-radius: 50%;
        background: var(--clr-container-alt);
    }
    /************************* CONTACT SECTION *************************/


    /************************* FOOTER *************************/
    footer {
        color: white;
        background-color: var(--clr-container);
    }

    .footer-link {
        color: white;
    }

    .footer-link:hover {
        color: var(--clr-accent);
    }
    /************************* FOOTER *************************/


    /************************* ABOUT PAGE *************************/
    .presentation-section, .cshi-section, .challenges-section {
        color: white;
        background-color: var(--clr-container) ;
    }
    /************************* ABOUT PAGE *************************/
}

@layer layout {
    #app {
        display: grid;
        grid-template-columns: 1fr min(100% - 3rem, 960px) 1fr;
    }

    #app > * {
        grid-column: span 3;

        display: grid;
        grid-template-columns: subgrid;
    }

    .wrapper {
        grid-column: 2 / -2;
    }

    /************************* HEADER *************************/
    header {
        z-index: 10;
        position: sticky;
        inset: 0 0 auto 0;
        padding-block: .75rem;
    }

    header .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-list {
        display: flex;
        column-gap: 1rem;
        align-items: center;
    }

    .nav-menu-button, .nav-close {
        display: none;
    }

    .nav-button {
        padding: .5rem 1rem;
    }

    @media (width < 600px){
        .nav-menu-button, .nav-close {
            display: block;
        }

        .nav-list {
            inset: 0 0 auto 0;
            position: absolute;
            translate: 0 -100%;
            padding-block: 2rem;

            display: flex;
            row-gap: 2rem;
            align-items: center;
            flex-direction: column;
        }

        .nav-list.show {
            translate: 0 0;
        }
    }
    /************************* HEADER *************************/
    
    
    section + section {
        margin-top: 12rem;
    }
        
    /************************* HERO SECTION *************************/
    .hero-section {
        padding-block: 5rem;
    }
    
    .hero-section .wrapper {
        gap: 3rem;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }
    /************************* HERO SECTION *************************/


    /************************* PARTNERS *************************/
    .partner-img {
        width: 100px;
    }

    .scroller {
        max-width: 960px;
    }

    .scroller-inner {
        display: flex;
        column-gap: 3rem;
        flex-wrap: nowrap;
        align-items: center;
        padding-block: 1rem;
    }

    .scroller[data-animated="true"]{
        overflow: hidden;
    }

    .scroller[data-animated="true"] .scroller-inner {
        width: max-content;
    }

    @keyframes scroll {
        to {
            translate: calc(-50% - .5rem);            
        }
    }
    /************************* PARTNERS *************************/

    /************************* STATS SECTION *************************/
    .stats-list {
        gap: 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(120px + 8rem)), 1fr));
    }

    .stat {
        padding: 4rem;
    }
    /************************* STATS SECTION *************************/


    /************************* MISSION SECTION *************************/
    .missions-section {
        padding-block: 5rem;
    }

    .mission-list {
        gap: 2rem;
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }

    .mission {
        padding: 1rem;
        display: grid;
        row-gap: .5rem;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
    /************************* MISSION SECTION *************************/


    /************************* PROJECT SECTION *************************/
    .project-section .wrapper {
        gap: 2rem;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }
    /************************* PROJECT SECTION *************************/



    /************************* CTA SECTION *************************/
    .cta-section .wrapper {
        padding: 3rem;
        display: flex;
        row-gap: 1.5rem;
        align-items: center;
        flex-direction: column;
    }
    /************************* CTA SECTION *************************/


    /************************* CONTACT SECTION *************************/
    .contact-list {
        display: grid;
        gap: 3rem 2rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }

    .contact {
        display: flex;
        row-gap: .5rem;
        align-items: center;
        flex-direction: column;
    }

    .contact-profile {
        padding: 2rem;
    }

    .contact-links {
        gap: 1.5rem;
        display: flex;
    }
    /************************* CONTACT SECTION *************************/


    /************************* FOOTER SECTION *************************/
    footer {
        margin-top: 10rem;
        padding-block: 3rem;
    }
    
    footer .wrapper {
        gap: 2rem;
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    }

    .footer-main {
        grid-column: span 2;
    }

    footer .wrapper > * {
        display: grid;
        row-gap: .75rem;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }

    .footer-links {
        display: flex;
        row-gap: .5rem;
        flex-direction: column;
    }

    @media (width < 400px) {
        .footer-social {
            order: 3;
        }
    
        .footer-address {
            order: 4;
            grid-column: span 2;
        }
    }
    /************************* FOOTER SECTION *************************/

    /************************* ABOUT PAGE *************************/
    .about-sections .wrapper {
        gap: 2rem;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }

    .presentation-section, .cshi-section, .challenges-section {
        padding-block: 5rem;
    }
    /************************* ABOUT PAGE *************************/

    /************************* GALLERY PAGE *************************/
    .gallery-section {
        margin-top: 5rem;
    }

    .gallery-list {
        display: grid;
        gap: 2rem 3rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }

    .gallery-image img {
        object-fit: cover;
        aspect-ratio: 16 / 9;
    }
    /************************* GALLERY PAGE *************************/
}

@layer utilities {
    /************************* Structure *************************/
    .flow > * + *{
        margin-top: var(--flow);
    }

    .flow-md > * + *{
        margin-top: calc(var(--flow) * 2);
    }

    .flow-sm > * + *{
        margin-top: calc(var(--flow) / 2);
    }

    .flow-xs > * + *{
        margin-top: calc(var(--flow) / 4);
    }

    .flow-lg > * + *{
        margin-top: calc(var(--flow) * 4);
    }
    /************************* Structure *************************/

    /************************* Typography *************************/
    .text-max {
        font-size: var(--fs-800);
    }

    .text-xxl {
        font-size: var(--fs-700);
    }

    .text-xl {
        font-size: var(--fs-600);
    }

    .text-lg {
        font-size: var(--fs-500);
    }
    
    .text-md {
        font-size: var(--fs-400);
    }

    .text {
        font-size: var(--fs-300);
    }

    .text-sm {
        font-size: var(--fs-200);
    }

    .text-xs {
        font-size: var(--fs-100);
    }

    .text-bold {
        font-weight: 600;
    }

    .text-center {
        text-align: center;
        margin-inline: auto;
    }
    /************************* Typography *************************/

    /************************* Links & Buttons *************************/
    .btn, .btn-sm, .btn-lg {
        color: white;
        border-radius: .5rem;
        display: inline-block;
    }
    
    .btn-primary {
        color: white;
        background-color: var(--clr-primary);
    }
    
    .btn-primary-alt {
        color: black;
        background-color: var(--clr-primary-alt);
    }

    :is(.btn-primary, .btn-primary-alt):hover {
        color: white;
        background-color: var(--clr-accent);
    }

    .btn {
        padding: .5rem 1rem;
    }

    .btn-sm {
        padding: .25rem .5rem;

    }

    .btn-lg {
        padding: 1rem 2rem;

    }

    .link {
        color: black;
        display: inline;
    }

    .link:hover {
        color: var(--clr-accent);
    }
    /************************* Links & Buttons *************************/
}