#toc {
        position: relative;
        margin-top: 24px;
    }

    #table-of-contents {
        position: relative;
        margin: 0 auto;
        max-width: 760px;
        padding:24px 0;
        font-family: 'Manrope', sans-serif;
        border-top:1px solid #e5e5e5;
        border-bottom:1px solid #e5e5e5;
    }
    
    @media screen and (max-width: 959px) {
        #table-of-contents {
            max-width: 600px;
        }
    }

    @media screen and (max-width: 639px) {
        #table-of-contents {
            max-width: 100%;
            margin: 0 20px 0 20px;
        }
    }

    #table-of-contents .toc-header {
        display: block;
        padding: 0px 8px 12px 8px;
        font-size: 24px;
        line-height: 28px;
        font-weight: 400;
        color: #000000;
        font-family:'DaysOne';
    }

    #table-of-contents ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #table-of-contents li {
        padding: 2px 8px;
        border-radius: 0 8px 8px 0;
        margin-bottom: 4px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    #table-of-contents a {
        text-decoration: none;
        color: #000000;
        transition: color 0.3s ease, opacity 0.3s ease;
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
        display: block;
        font-size: 15px;
        line-height: 20px;
        letter-spacing:0.15px;
        opacity: 0.6;
    }

    #table-of-contents a:hover {
        opacity: 1;
        text-decoration: underline;
    }

    .toc-level-2 {
        margin-left: 0;
    }

    .toc-level-3 {
        margin-left: 12px;
    }

    #table-of-contents li.active {
        font-weight:500;
    }

    #table-of-contents li.active > a {
        opacity: 1;
    }