/* SIDEBAR */
.sidebar {
    position: sticky;
    top: 100px;

    font-family: Clash, sans-serif;
    text-align: left;

    background-color: bisque !important;
    border-radius: 8px;
}

#sidebar-spacer {
    min-width: 16rem;
    height: 100%;
}

#sidebar-content-wrapper {
    width: 100%;
    /*margin-top: 2rem;*/
    padding: 0;
    overflow: visible;
    flex-wrap: wrap;
    background-color: white;
    /*padding-bottom: 6rem;*/
}

.sidebar .nav-link {
    position: relative;
    color: black;
    font-size: 14pt;
    background-color: rgba(0, 0, 0, 0) !important;
}

.sidebar .nav-link.sup-link:hover,
.chapter-wrapper.active .sup-link {
    color: #81b29a !important;
    font-weight: 500;
}

.sidebar .nav-link.sub-link:hover,
.sidebar .nav-link.sub-link.active {
    color: #f2cc8f !important;
}

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

.nav-link.sub-link {
    font-size: 0.9rem !important;
    padding-top: 0 !important;
    color: #808080 !important;
}

.chapter-wrapper.active .sub-link {
    display: block;
}

.chapter-wrapper.inactive .sub-link {
    display: none;
}

#sidebar-mobile-button {
    display: none;
}

/* underlining animation only on desktop */
@media all and (min-width: 551px) {
    .sidebar .nav-link::after {
        position: absolute;
        bottom: 0;
        left: -25%;
        right: 0;
        margin: auto;
        width: 0;
        content: "";
        height: 4px;
        transition: all 0.5s;
    }

    .sidebar .sup-link:after {
        background-color: #81b29a;
    }

    .sidebar .sub-link:after {
        background-color: #f2cc8f;
    }

    .sidebar .nav-link:hover::after {
        width: 60%;
        transition: all 0.5s;
    }
}

/* get rid of headbutting when pressing on links, courtesy: https://css-tricks.com/hash-tag-links-padding/ */
#sidebar-content-wrapper h4::before,
#sidebar-content-wrapper h5::before {
    display: block;
    content: " ";
    margin-top: -80px;
    height: 80px;
    visibility: hidden;
    pointer-events: none;
}

/*#sidebar-content-wrapper h4, .event-text h4 {*/
/*    text-align: center;*/
/*    font-size: 3rem;*/
/*    color: #67a286;*/
/*    padding-top: 4rem;*/
/*    font-weight: bolder;*/
/*}*/
.sidebar-title {
    text-align: center;
    font-size: 1.8rem;
    color: #eaac4a;
    font-weight: normal;
    padding-top: 2rem;
}

/*#sidebar-content-wrapper h5, .event-text h5 {*/
/*    text-align: center;*/
/*    font-size: 1.8rem;*/
/*    color: #eaac4a;*/
/*    font-weight: normal;*/
/*    padding-top: 2rem;*/
/*}*/