@media only screen and (max-width:1250px) {
    .sidetoc {
        display: none;
    }
    :root {
        --sidebar-width: 240px;
    }
}

@media only screen and (min-width:1251px) {
    :root {
        --sidebar-width: 240px !important;
        --content-max-width: unset;
    }
    main {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "content sidebar";
        gap: 20px;
        max-width: var(--content-max-width);
        width: 100%;
        margin: 0 auto;
    }

    .content-wrap {
        min-width: 0;
        grid-area: content;
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }

    .sidetoc {
        min-width: 220px;
        max-width: 280px;
        position: sticky;
        right: 0;
        top: 50px;
        height: calc(100vh - 50px);
        overflow-y: auto;
        z-index: 102;
    }

    .pagetoc {
        position: fixed;
        width: 200px;
        height: calc(100vh - var(--menu-bar-height) - 1.1em * 4);
        overflow: auto;
        border: 1px solid var(--sidebar-bg);
        background-color: var(--bg);
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
    }
    .pagetoc a {
        color: var(--fg) !important;
        display: block;
        padding-bottom: 5px;
        padding-top: 5px;
        padding-left: 10px;
        text-align: left;
        text-decoration: none;
    }
    .pagetoc a:hover,
    .pagetoc a.active {
        background: var(--sidebar-bg);
        color: var(--sidebar-active) !important;
        border-radius: 5px;
    }
    .pagetoc .active {
        background: var(--sidebar-bg);
        color: var(--sidebar-fg);
        border-radius: 5px;
    }
    .pagetoc .pagetoc-H2 {
        padding-left: 20px;
    }
    .pagetoc .pagetoc-H3 {
        padding-left: 40px;
    }
    .pagetoc .pagetoc-H4 {
        padding-left: 60px;
    }
    .pagetoc .pagetoc-H5 {
        display: none;
    }
    .pagetoc .pagetoc-H6 {
        display: none;
    }
}

@media only screen and (min-width:1540px) {
    :root {
        --sidebar-width: 300px;
    }
    main {
        margin-left: auto !important;
    }
}

@media print {
    .sidetoc {
        display: none !important;
    }
}