body {
    font-size: var(--default-font-size);
    font-family: var(--font-system);
    color: var(--text-color);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
    background:
        linear-gradient(1deg, transparent 0%, var(--background-dark-accent) 80%, var(--background-dark-accent)) top no-repeat,
        linear-gradient(1deg, #202020 0%, #202020 7%, var(--background-dark-primary) 14%, var(--background-dark-secondary) 32%, var(--background-dark-primary) 65%, transparent) bottom no-repeat,
        var(--background-dark-primary);
    background-size: auto 32rem, auto 512rem, auto;
}

header, main, footer {
    margin: 0 auto;
    max-width: var(--page-width);
    width: 100%;
}

main {
    margin-bottom: auto;
}

a {
    color: var(--featured-color);
}

a:hover {
    color: var(--featured-color-hover);
}

/* Header */

header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: last baseline;
    height: 6rem;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

header > nav {
    margin-left: auto;
}

header > nav ul {
    display: inline-flex;
    flex-direction: row;
    column-gap: 1.5rem;
}

header > nav li > a {
    color: var(--top-navigation-link-color);
    text-decoration: none;
}

header > nav li > a::after {
    content: "\25BE";
    padding-left: 0.3rem;
}

.header-mascot {
    object-fit: contain;
    object-position: center bottom;
    align-self: end;
    width: 3.708rem;
    height: 6rem;
}

.header-trademark {
    object-fit: contain;
    object-position: center bottom;
    align-self: end;
    width: 13rem;
}

.header-logo {
    position: relative;
    display: inline-flex;
    height: 100%;
    align-items: last baseline;
    /* padding-left: 4.8rem; */
}

.header-logo::before {
    content: " ";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 3.708rem;
    height: 6rem;
    background-color: var(--logo-color);
    border-bottom-left-radius: 0.075rem;
    border-bottom-right-radius: 0.075rem;
    box-shadow: 0 -16rem 32rem 32rem #bf491f33; /* This isn't showing correctly in FF */
}

/* Main */

main {
    position: relative;
    min-height: 3000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-section {
    width: 100vw;
    height: 75vh;
    min-height: 24rem;
    background: #ffffff22;
    margin-bottom: 3rem;
}

.hero-section > h1 {
    font-size: var(--hero-font-size);
    font-weight: var(--hero-font-weight);
    line-height: var(--hero-line-height);
    margin: 10rem auto;
    padding-right: min(480px, 30%);
    max-width: var(--page-width);
    width: 100%;
}

.content-section {
    width: 100%;
    margin: 0 auto 3rem auto;
}

/* Footer */

footer {
    position: relative;
    background: linear-gradient(90deg, transparent 0%, #202020 5%, #202020 95%, transparent);
    padding-top: 3rem;
    padding-bottom: 10rem;

    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    margin-bottom: 3rem;
}

footer::before {
    content: " ";
    position: absolute;
    left: 0;
    top: -0.15rem;
    right: 0;
    height: 0.15rem;
    border-radius: 0.075rem;
    background-color: #48797b;
}

footer > nav {
    margin-bottom: 5rem;
}

footer > nav a {
    text-decoration: none;
}

footer > nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.0375rem;
}

footer > nav > section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: first baseline;
    padding-top: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

footer > nav > section::before {
    content: " ";
    position: absolute;
    left: 0;
    top: -0.075rem;
    right: 0;
    height: 0.075rem;
    border-radius: 0.0375rem;
    background-color: gray;
}

footer > nav section > h3 {
    min-width: 15rem;
    width: 23%;
    flex-shrink: 0;
}

footer > nav section > h3 a {
    color: white;
    font-size: var(--navigation-title-font-size);
    font-weight: var(--navigation-title-font-weight);
    margin-bottom: 0.25rem;
}

footer > nav section li > h4 {
    font-size: var(--navigation-subtitle-font-size);
    font-weight: var(--navigation-subtitle-font-weight);
}

footer > nav section li > a {
    font-size: var(--navigation-item-font-size);
    font-weight: var(--navigation-item-font-weight);
}

footer > nav section li + li > h4 {
    margin-top: 1rem;
}

footer > nav section > ul li:has(h4) {
    flex-basis: 100%;
}

footer > nav section > ul {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

.footer-legal {
    display: flex;
    flex-direction: column;
}

.legal-links {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}

.legal-links a {
    color: white;
    text-decoration: none;
}

.legal-links a:hover {
    color: gray;
    text-decoration: underline;
    text-decoration-thickness: 0.0375rem;
}