.navigation {
    position: sticky;
    top: 0;
    z-index: 99999;
    background-color: #fafafa;
    box-shadow: 0 11px 5px -4px rgba(250,250,250,0.75);
    -webkit-box-shadow: 0 11px 5px -4px rgba(250,250,250,0.75);
}

@media (prefers-color-scheme: dark) {
    .navigation {
        position: sticky;
        top: 0;
        z-index: 99999;
        background-color: #212121;
        box-shadow: 0px 11px 5px -4px rgba(33,33,33,0.75);
        -webkit-box-shadow: 0px 11px 5px -4px rgba(33,33,33,0.75);
    }
}

/* 
Preventing a sticky header from hiding the title of an anchor
https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/
*/

h1 {
    scroll-margin-top: 2em;
}

h2 {
    scroll-margin-top: 2em;
}

h3 {
    scroll-margin-top: 2em;
}

h4 {
    scroll-margin-top: 2em;
}

h5 {
    scroll-margin-top: 2em;
}

h6 {
    scroll-margin-top: 2em;
}