html {
    scroll-padding-top: 80px;
}

.article-content__side-nav {
    font-size: 14px;
    font-family: "Robot Mono", sans-serif;
    line-height: 21px;
}

.article-content__side-nav {
    display: none;
}

@media (min-width: 1200px) {
    .article-content__side-nav {
        display: block;
        height: 100%;
        left: 0;
        max-width: 250px;
        position: sticky;
        top: 0;
        width: calc((100vw - 720px) / 2 - 20px);
    }
    .article-content__side-nav-container {
        display: block;
        height: 100%;
        left: 0;
        max-width: 250px;
        position: absolute;
        top: 0;
        width: calc((100vw - 720px) / 2 - 20px);
    }
}

.article-content__side-nav > ol {
    list-style-position: outside !important;
}

@media (min-width: 1200px) {
    .article-content__side-nav > ol {
        counter-reset: item;
        list-style-type: none;
        max-height: calc(100vh - 100px);
        overflow: auto;
        padding-left: 50px;
        padding-top: 6px;
        position: -webkit-sticky;
        position: sticky;
        top: calc( 100px + var(--wp-admin--admin-bar--height) );
    }
}

.article-content__side-nav > ol li {
    margin-bottom: 5px;
}

@media (min-width: 1200px) {
    .article-content__side-nav > ol li {
        color: #717781;
        transition: color .3s ease-out;
    }
}

@media (min-width: 1200px) {
    .article-content__side-nav-list-item--active, .article-content__side-nav-list-item:focus-within, .article-content__side-nav-list-item:hover {
        color: #000 !important;
    }

    .darkmode--activated .article-content__side-nav-list-item--active, .darkmode--activated .article-content__side-nav-list-item:focus-within, .darkmode--activated .article-content__side-nav-list-item:hover {
        color: white !important;
    }
}

@media (min-width: 1200px) {
    .article-content__side-nav > ol li:before {
        content: counter(item);
        counter-increment: item;
        position: absolute;
        left: 20px;
        text-align: right;
        width: 15px;
    }
}

.article-content__side-nav > ol li a{
    color: inherit;
    text-decoration: underline;
    text-decoration: none;
}

@media (min-width: 1200px) {
    .article-content__side-nav > ol li a{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity .2s;
        white-space: nowrap;
    }
    .article-content__side-nav > ol.side-nav--hidden li a{
        opacity: 0;
    }

}

.article-content__side-nav-container:hover .article-content__side-nav > ol.side-nav--hidden li a{
    opacity: 1;
}