:root {
    --toc-bg: #d0e0e0;
}


@media (prefers-color-scheme: dark) {
    :root {
        --toc-bg: #10191b;
    }
}


@media (min-width: 800px) {
    #main-content {
        display: grid;
        gap: 1em;
        grid-template-areas: "toc content"
                             "page-menu page-menu"
                             "ccfoot ccfoot";
        grid-template-columns: 1fr 5fr;
    }

    #toc {
        padding-right: 1em;
    }
}


div.ccfoot {
    grid-area: ccfoot;
}

div.content-area {
    grid-area: content;
}

#page-menu {
    grid-area: page-menu;
}

#toc {
    background-color: var(--toc-bg);
    grid-area: toc;
}

#toc-label {
    font-size: 1.25rem;
    text-align: center;
}