body {
    font-family: "Newsreader", "Times New Roman", serif;
    font-size: 1.15em;
}

:is(h1, h2, h3, h4, h5) {
    font-family: "Raleway", 'Arial', sans-serif;
    font-weight: 900;
}

:is(h1, h2) {
    color: #005500;
    text-transform: uppercase;
    &.section-title {
        font-size: var(--margin-xxl);
        margin: 0;
        @media only screen and (max-width: 35em) {
            font-size: var(--margin-xl);
        }
    }
}

body > header {
    background: transparent;
    margin-top: var(--margin-xl);
    svg {
        height: auto;
        width: 32em;
        max-width: 80vw;
        aspect-ratio: 415 / 140;
        margin: 0 auto;
    }
}

@media only screen and (max-width:35em) {
    body > header{
        background: wheat;
        margin-top: 0;
    }
    body > header svg {
        margin-top: var(--margin-xl);
        width: 100%;
        height: auto;
    }
    body > header nav ul {
        flex-direction: column;
    }
}

.floater {
    position: fixed;
    bottom: var(--margin-xl);
    right: var(--margin-xl);    
}

#app-header {
    flex-direction: column;
}

header nav a {
    font-family: 'Raleway', 'Arial', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--primary-color-1);
    font-size: 1.1em;
}

.landing-main--splash {
    &.landing-splash--type-split {
        .landing-main--title-container {
            text-shadow: none;
            color: var(--_landing-main-content-fg);
            h1 {
                margin: 0;
            }
            a.button {
                color: var(--primary-color-1-fg, white);
                display: none;
            }
            @media only screen and (max-width: 35em) {
                width: 100%;
                height: max-content;
                padding: var(--margin-l);
            }
        }
        @media only screen and (max-width: 35em) {
            img {
                width: 100%;
                position: initial;
            }
        }
    }
}

footer {
    svg {
        max-width: 50vw;
        height: auto;
        margin: 0 auto;
    }
}

a.button {
    color: var(--primary-color-1-fg, white);
    background: var(--primary-color-1);
    &:visited {
        color: var(--primary-color-1-fg, white);
        background: var(--primary-color-1);
    }
    font-family: "Raleway";
    text-transform: uppercase;
    font-weight: 900;
}