body {
    padding-bottom: 1em;
    min-height: calc(100vh - 1em);
}

body > header,
#account-services a:link,
#account-services a:visited {
    color: white;
}

#account-services {
    padding: 0.25em 0.5em;
    text-align: right;
    background-color: #572411;
}

@media (prefers-color-scheme: dark) {
    #account-services {
        background-color: #33150A;
    }
}

#logout-form {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

body > header > h1 {
    margin: 0;
    border-style: solid;
    border-color: gold;
    border-width: 4px 0;
    padding: 1rem 0.5rem 0 0.5rem;
    font-variant: small-caps;
    background-color: var(--header-background);
}

body > header img {
    filter: invert(1);
}

body > header > h1 > a {
    margin-right: 0.25rem;
}

body {
    background-color: #FCF4E8;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #111;
    }
}

main {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: fit-content;
}

@media (width > 864px) {
    html {
        background-color: darkgreen;
        background: radial-gradient(at top, #3B250F 50%, black);
    }

    @media (prefers-color-scheme: dark) {
        html {
            background-color: #121254;
            background: radial-gradient(at top, #1F0D06 25%, black);
        }
    }

    body {
        margin-left: auto;
        margin-right: auto;
        max-width: 48em;
        box-shadow: 0 0 1em 3px black;
    }
}