body {
    background-color: #DCDCC4;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    /* https://github.com/yesiamrocks/CSS-Fallback-Fonts */
}

details {
    margin-block: 1em;
}

dl.horizontal {
    &>dt {
        display: inline;
    }

    &>dt::after {
        content: ": ";
    }

    &>dd {
        display: inline;
        margin: 0;
        font-style: italic;
    }

    &>dd::after {
        display: block;
        content: "";
    }
}

:root {
    --content-width: 40em;
}

main {
    margin: auto;
    max-width: var(--content-width);
}

body>header {
    max-width: max(80%, var(--content-width));
    margin: 0.5em auto;

    & nav {
        background-color: #CC6600;
        border-radius: 0.5em;
        padding: 0.5em;
        text-align: center;

        & .navbarOption {
            display: inline-block;
            border-radius: 0.5em;
            padding: 0.5em;
            font-size: 1.2em;
            color: white;
            font-weight: bold;
            transition: background-color 0.4s, color 0.4s;
            outline-offset: 0;

            &:hover, &:focus {
                background-color: cornflowerblue;
                color: black;
            }

            &:focus {
                outline: 0.15em solid black;
            }
        }

        & ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 0.5em;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        & a {
            text-decoration: none;
        }

        & label.navbarSmallControl {
            display: none;
            cursor: pointer;

            & input[name="navbarLatch"] {
                display: none;
            }
        }

        @media (max-width: 40em) {
            & label.navbarSmallControl:not(:has(input[name="navbarLatch"]:checked)) {
                display: inline-block;
            }

            & ul {
                margin-top: 0.5em;
            }

            & label:has(input[name="navbarLatch"][value="hide"]:checked)~ul {
                display: none;
            }
        }
    }
}