/***
 * The following changes increase the size of the navigation sidebar to accommodate the nesting and size
 * of our navigation items better. All rem values are linked and should be adjusted up and down together
 * with the same relative offsets for best result.
 ***/


.md-grid {
    /* was 61rem  */
    max-width: 70rem;
}

.md-sidebar--primary {
    /* was 12.1rem */
    width: 16.1rem;
}

@supports selector(::-webkit-scrollbar) {
    [dir=ltr] .md-sidebar__inner {
        /* was 11.5rem */
        padding-right: calc(100% - 16.5rem);
    }
}

@media screen and (max-width: 76.1875em) {
    [dir=ltr] .md-sidebar--primary {
        /* was 12.1rem */
        left: -16.1rem
    }

    [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
        /* was 11.1rem */
        transform: translateX(16.1rem);
    }
}

/* The following CSS is for additional styling of the content */

img.image-bg-white {
    background-color: white;
    padding: 10px;
}

div.mono code {
    font-family: monospace;
}

/* This CSS adds a dotted underline under links in highlighted code blocks */
.highlight a span {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--md-typeset-a-color);
}

/* Find the section that is currently targeted (by the fragment of the URL),
 * mark it with a yellow stripe (border) on the left side. And highlight it
 * which fades out to catch the eye of the user.
 */

@keyframes highlight-target {
    0% {
        background: #174A5EFF;
    }

    100% {
        background: #174A5E00;
    }
}

section:has(> h2:target),
section:has(> h3:target),
section:has(> h4:target),
section:has(> h5:target),
section:has(> h6:target) {
    border-left: 3px solid var(--md-typeset-a-color);
    padding-left: 6px;
    animation: highlight-target 2s;
}