:root {
    --color-blue: #2448a4;
    --color-blue-light: #B6C1DB;
    --color-orange: #D9711C;
    --color-orange-light: #DDC0A9;
    --color-tan: #D3AE7F;
    --color-tan-light: #EBDED0;
    --color-grey: #7E7673;
    --color-grey-light: #E6D9D4;
    --color-black: #172030;
    --color-white: #F1F4FA;
    --content-font: 'Verdana', sans-serif;
    --header-font: 'Verdana', serif;
}

html {
    font-size: 100%;
}

body {
    background-color: var(--color-tan-light);
    background-image: linear-gradient(to bottom, transparent, var(--color-tan-light) 35%, var(--color-blue-light)), url("/assets/img/plywood.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    @media (width < 960px) {
        background-size: 960px;
    }
    font-family: var(--content-font);
    font-size: 1.0rem;
    color: var(--color-black);
    margin: 0% 0% 0% 0%;
}

body > * {
    display: flex;
    width: 100%;
    max-width: 960px;
    margin: auto;
    box-shadow: 0px 0px 8px 4px #888888;
}

header {
    background-color: var(--color-blue);
    color: var(--color-blue-light);
    font-family: var(--header-font);
    flex-direction: row;
    justify-content: center;
    position: sticky;
    top: 0px;
    z-index: 1;
}

header > * {
    padding: 0px 20px;
}
/*
header > h2 {
    flex-grow: 1;
}

header > .logo {
    flex-grow: 1;
}
*/

header > .spacer {
    flex-grow: 1
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px 20px;
}

main {
    background-color: var(--color-white);
    background-color: color-mix(in srgb, var(--color-white) 50%, transparent);
    font-family: var(--content-font);
    font-size: 1.0rem;
    flex-direction: column;
    justify-content: center;
}

main section {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 40px;
}

main article {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 40px;
}

main section button {
    margin: 20px auto;
}

footer {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--content-font);
}

footer > * {
    padding: 40px;
}

.tint-blue {
    background-color: var(--color-blue);
    color: var(--color-blue-light);
}

.tint-tan {
    background-color: var(--color-tan);
    color: var(--color-tan-light);
}

.tint-orange {
    background-color: var(--color-orange);
    color: var(--color-orange-light);
}

.tint-grey {
    background-color: var(--color-grey);
    background-color: color-mix(in srgb, var(--color-black) 60%, transparent);
    color: var(--color-grey-light);
}

button {
    font-family: var(--content-font);
    font-size: 1.2rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    margin: auto;
    padding: 10px;
}

button.tint-blue:hover {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
}

button.tint-orange:hover {
    background-color: var(--color-orange-light);
    color: var(--color-orange);
}

.pitch-box {
    justify-content: center;
    font-family: var(--header-font);
    font-size: 1.1rem;
    text-align: center;
}

.pitch-box > * {
    margin: 20px auto;
}

h1 {
    font-size: 2.0rem;
}

hr {
    width: 100%;
    border: 0.1rem solid;
    margin: 20px 0px;
}

hr.tint-orange {
    color: var(--color-orange-light);
}

details summary {
    cursor: pointer;
}

a {
    margin: auto;
}

img {
    margin: auto;
}