:root {
    --primary: #23272F;
    --secondary: #BFC9D5;
    --accent: #7FD1B9;

    min-height: 100vh;

    background: var(--primary);
    color: var(--secondary);
    a { color: var(--accent); }

    font-size: 15pt;
    line-height: 1.5;

    pre {
        overflow-x: auto;
        white-space: pre;
        max-width: 100%;
    }
}

body {
    min-height: 100vh;
    margin-block: 0;

    margin-inline: 1em;
    @media (min-width: 601px) and (max-width: 900px) { margin-inline: 10vw; }
    @media (min-width: 901px) { margin-inline: auto; width: 40em; }

    display: flex;
    flex-direction: column;

    header {
        display: flex;
        flex-direction: column;

        @media (min-width: 901px) {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }

        #brand {
            font-size: 1.5em;
        }

        nav {
            flex-grow: 1;

            font-size: 1.25em;

            ul {
                padding: 0;

                display: flex;
                gap: 2em;

                justify-content: space-between;
                @media (min-width: 901px) { justify-content: flex-end; }

                list-style-type: none;

                li a {
                    text-transform: capitalize;
                }
            }
        }
    }

    main {
        flex-grow: 1;

        section {
            display: flex;
            justify-content: space-between;
            gap: 2em;

            nav {
                white-space: nowrap;
                width: auto;

                & > ol {
                    padding: 0;

                    ol {
                        padding-left: 1em;
                    }
                }
            }
        }
    }

    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        font-size: .8em;

        img {
            height: 2em;
        }
    }
}