:root {
    --max-page-width: 60rem;
    --color-black: #2a2a2a;
    --color-gray: #757575;
    --color-white: #fff;
    --color-blue: #227ab9;
    --color-red: #dc322f;
}

body {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    max-width: var(--max-page-width);
    margin: 0 auto;
    padding: 0 1em;
    color: var(--color-black);
    background: var(--color-white);
}

a,
a:visited {
    color: var(--color-blue);
}

a:focus,
a:hover,
a:active {
    color: var(--color-red);
}

header {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

@media (min-width: 40rem) {
    header {
        position: sticky;
        top: 0;
    }
}

header nav {
    max-width: var(--max-page-width);
    margin: 0 auto;
    padding: 0.5em 1em;
    font-size: 1.25em;
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
}

header nav > .spacer {
    flex: 1 1 0%;
    place-self: stretch;
}

header nav a,
header nav a:visited {
    color: var(--color-black);
}

header nav a:focus,
header nav a:hover,
header nav a:active {
    color: var(--color-red);
}

footer {
    max-width: 15em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    padding-top: 5em;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    color: var(--color-gray);
    text-align: center;
}

footer a,
footer a:visited {
    color: var(--color-gray);
}

footer a:focus,
footer a:hover,
footer a:active {
    color: var(--color-red);
}

.preamble {
    max-width: 72ch;
    margin: 4em auto;
}

.blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
    gap: 2em;
}

.prose {
    max-width: 72ch;
    margin: 0 auto;
}

svg.icon {
    width: 1em;
    height: 1em;
    margin-bottom: -0.125em;
}