:root {
        --text-color: #cecdcc;
        --back-color: #202020;
        --container-max-width-sm: 540px;
        --container-max-width-md: 720px;
        --container-max-width-lg: 960px;
        --container-max-width-xl: 1140px;
        --container-max-width-xxl: 1320px;
        --container-max-width-xxxl: 1440px;
    }

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

    html {
    scroll-behavior: smooth;
    }

    body {
    width: 100%;
    height: 100%;
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-weight: 600;
    color: var(--back-color);
    background-color: var(--text-color);
    }

    header {
        position: fixed; 
        top: 0px;
        left: 0px;
        width: 100%;
        height: 2rem;
        z-index: 1000;
        #menu {
            width: 1320px;
            margin: auto;
            max-width: 100%;
            padding: 1rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            a {
                text-decoration: none;
                color: inherit;
            }
        }
    }

    footer {
        width: 100%;
        height: 2rem;
        margin-top: 10rem;
        > div {
            width: 1320px;
            margin: auto;
            max-width: 100%;
            padding: 1rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            a {
                text-decoration: none;
                color: inherit;
            }
        }        
    }

    body {

    }

    main {
        width: 1320px;
        margin: auto;
        max-width: 100%;
        padding: 0 1rem;
        display:flex;
        flex-direction: column;
        gap: 6rem;

        > * {
            min-height: 100dvh;
            display: flex;
            align-items: center;
        }

        h3 {
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.4;
            padding: 1rem 0rem;
            max-width: 30em;
        }
        p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            padding: 1rem 0rem;
            max-width: 45em;
        }        
        h1 {
            font-size: 20dvw;
            font-weight: 900;
            line-height: .9;
            padding: 0;
        }
        label {
            font-weight: 100;
            font-size: .75rem;
        }
        .flex-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem 4rem;
            align-items: center;
            margin-top: 1rem;
            max-width: 45em;
            > * {
                height: 20px;
                object-fit: contain;
                object-position: left center;
            }
        }
        a {
            color: inherit;
            text-decoration: none;
        }
    }

    h1.hero {
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100dvh;
        
        font-size: 5rem;
        letter-spacing: initial;
        text-align: center;

        background-image: url(background.png);
        background-position: center 50%;
        background-size: 100%;
        background-repeat: no-repeat;
        text-wrap: balance;

        div { max-width: 10em; }

        > * {
            mix-blend-mode: multiply;
        }

        #logo {
            height: 200px;
            @media (max-width:425px) {
                height:150px;
            }
        }
    }