:root {
    color-scheme: light dark;

    --bg-color: #f8f8f8;
    --bg-color-secondary: #eee;
    --bg-color-hero: #fff;
    --fg-color: #252525;
    --fg-color-secondary: #ccc;
    --button-bg-color: #ecdfff;
    --button-bg-color-hover: #d6bbff;
    --button-hero-bg-color: #ecdfff;
    --button-hero-bg-color-hover: #d6bbff;

    --page-width: 50rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #171717;
        --bg-color-secondary: #333333;
        --bg-color-hero: #575757;
        --fg-color: #eee;
        --fg-color-secondary: #333;
        --button-bg-color: #44207a;
        --button-bg-color-hover: #6b43a7;
        --button-hero-bg-color: #5a2ca0;
        --button-hero-bg-color-hover: #6b43a7;
    }
}

html {
    font-family: 'Poppins',sans-serif;
    font-size: 12pt;
}

@media (min-width: 768px) {
    html {
        font-size: 14pt;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--fg-color);
    margin: 0;
}

img.logo {
    width: 15rem;
    height: 15rem;
}

@font-face {
    font-family: 'Michroma';
    src: url('/static/fonts/Michroma-Regular.ttf');
}

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

main {
    h1, h2 {
        font-family: 'Michroma';
        margin-top: 2rem;
    }

    hr {
        margin: 3rem 0;
        border: 1px solid var(--fg-color-secondary);
    }
}

footer {
    margin-top: 2rem;
    padding-top: 5rem;
    padding-bottom: .5rem;
    background-color: var(--bg-color-secondary);

    p {
        font-size: 0.8rem;
    }

    nav {
        padding-bottom: 3rem;
    }

    nav, p {
        text-align: center;

        a {
            color: var(--fg-color);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    nav {
        display: flex;
        justify-content: center;
        gap: 1.5rem;

        a {
            text-transform: uppercase;
        }
    }
}

#team {
    .team-member {
        display: flex;
        gap: 1rem;
        margin: 2rem 0;

        .profile {
            > div, > img {
                margin: .5rem 0;
                width: 100px;
                height: 100px;
                background-color: var(--bg-color-secondary);
                border-radius: 10rem;
            }
        }

        > p {
            margin: .25rem 0;
            flex-grow: 1;
        }
    }
}

section {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 1rem;
}

section.hero {
    max-width: initial;

    .hero-inner {
        margin: 0 auto;
        max-width: var(--page-width);
    }

    padding-top: 5rem;
    padding-bottom: 1rem;
    background-color: var(--bg-color-hero);
    text-align: center;

    h1 {
        font-size: 3rem;
        margin-top:0;
    }

    h2 {
        margin-top: 2rem;
        font-size: 2rem;
    }

    p {
        text-align: center;
    }

    a {
        background-color: var(--button-hero-bg-color);

        &:hover {
            background-color: var(--button-hero-bg-color-hover);
        }
    }
}

section.next-steps {
    h1, h2 {
        text-align: center;
    }
}

nav.hero-nav,
nav.next-steps-nav {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    spacing: 2rem;
    gap: .75rem;
    margin: 1rem;
}

nav.hero-nav a,
nav.next-steps-nav a,
a.join-matrix-link {
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    color: var(--fg-color);
    background-color: var(--button-hero-bg-color);
    &:hover {
        background-color: var(--button-hero-bg-color-hover);
    }
}

nav.next-steps-nav {
    gap: 5.rem;

    a {
        font-size: 1.125rem;
        color: var(--fg-color);
        background-color: var(--button-bg-color);
        &:hover {
            background-color: var(--button-bg-color-hover);
        }
    }
}