main {
    background: url("../img/pic3.png") rgb(255 243 247 / 83%) repeat-y;
    background-blend-mode: lighten;
    background-size: 100vw;
    min-height: 100vh;
}

_::-webkit-full-page-media, _:future, :root main {
    background-repeat: no-repeat !important;
}

.grid {
    display: grid;
    grid-template-columns: min-content auto;
    align-items: start;
}

#sidebar-wrapper {
    display: block;
    height: 100vh;
    min-width: 8rem;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    position: sticky;
    top: 0px;
    z-index: 826;
    background-color: white;
}

#sidebar>nav {
    display: block;
    height: 100vh;
    min-height: 0 !important;
    max-height: min(auto, 100vh);
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border: 0;
}

#sidebar>nav::-webkit-scrollbar {
    display: none;
}

#sidebar>nav>a {
    width: 100%;
}

#sidebar>nav>a:hover {
    color: deepskyblue;
}

@media screen and (max-width: 768px) {
    .grid {
        grid-template-columns: auto;
    }

    #sidebar-wrapper {
        height: auto;
        width: 100%;
        border-right: 0 !important;
    }

    #sidebar {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    #sidebar>nav {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        height: auto;
        max-height: 12.5vh;
    }

    #sidebar>nav>a {
        border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        width: auto;
    }
}

main>section {
    padding: .5rem .5rem 0 .5rem;
}

section[content]:not(.show) {
    display: none !important;

}