@media only screen and (max-width: 600px) {
    /* duplicate of option2 */
    .wrapper {
        nav.toc {
            z-index: 2;
            left: 0;
            top: 0;
            position: fixed;
            background-color: var(--background-secondary);
            width: 100%;
            ul {
                padding: 0;
                display: flex;
                align-items: center;
                margin: 0 auto;
            }
            li {
                list-style: none;
            }
            li a {
                border-top: solid 1px var(--background);
                padding: 0.8em 0em;
                display: block;
                width: calc(100vw/12);
                text-align: center;
            }
            li a:hover {
                border-top: solid 1px var(--highlight);
                background-color: var(--background);
            }
            li.active a {
                border-top: solid 3px var(--highlight);
                background-color: var(--background);
                font-weight: bold;
            }
        }
    }
}


@media only screen and (min-width: 600px) {
    .wrapper {
        nav.toc {
            width: calc(5em + 4px);
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            background-color: var(--background-secondary);
            ul {
                padding: 0;
            }
            li {
                list-style: none;
            }
            li a {
                border-left: solid 1px var(--background);
                padding: 1em 2em;
                display: block;
                color: var(--primary);
            }
            li a:hover {
                border-left: solid 1px var(--highlight);
                background-color: var(--background);
            }
            li.active a {
                border-left: solid 3px var(--highlight);
                background-color: var(--background);
                font-weight: bold;
                color: var(--highlight);
            }
        }
    }
}