nav[aria-label="breadcrumb"] {
    background-color: var(--pico-primary);
}

nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] li,
nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
    color: var(--pico-primary-inverse);
}

main {
    display: flex;
}

main nav.sidebar {
    transition: left 0.3s ease;
    position: relative;
    left: -240px;
    width: 240px;
    z-index: 1000;
    flex-shrink: 1;
}

main nav.sidebar.show {
    left: 0;
}

main .content {
    width: calc(100% - 240px - 5%);
    margin: 0 2.5%;
    flex-grow: 1;
}

@media screen and (min-width: 992px) {
    main nav.sidebar {
        position: static;
        width: 240px;
        left: 0;
    }
}


@media screen and (max-width: 991px) {
    header nav .sidebar-open.show,
    header nav .sidebar-close.show {
        display: block;
    }

    main .content {
        margin-inline-start: calc(-240px + 2.5%);
    }
}

main nav.sidebar details summary::marker,
main nav.sidebar details summary ::-webkit-details-marker {
    content: "";
}

main nav.sidebar .menu {
    --pico-nav-element-spacing-vertical: 0.35rem;
    --pico-nav-element-spacing-horizontal: 1rem;
    background-color: var(--pico-primary);
    flex-direction: column;
    align-items: start;
    width: 240px;
}

main nav.sidebar .menu .menu li {
    padding-inline-start: 1.5rem;
}

main nav.sidebar .menu a {
    color: var(--pico-primary-inverse);
}

main nav.sidebar .active {
    font-weight: bold;
}