#mySidenav {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    z-index: 10;
    flex-direction: column;
    overflow: auto;
    transition: left linear .3s;
}

#mySidenav a {
    color: var(--sidebar-text);
    margin: 5px;
    font-size: large;
    border: solid 1px #6c6c6c12;
    border-radius: 5px;
    padding: 7px;
    margin: 0;
}

#mySidenav a:hover {
    /* background-color: rgb(209, 209, 209); */
    color: var(--accent);
    background-color: var(--sidebar-hover-bg);
}


.container {
    transition: padding-left 0.05s;
}

.container.sidebar-opened {
    padding-left: auto;
}

#sidebarKey {
    color: var(--text);
    font-size: 25px;
    margin-left: 10px;
}

/* .closebtn {
    height: 35px;
    width: 100%;
    cursor: pointer;
} */

/* nav section highlight style control */
.section.highlight {
    animation: color_change 1.5s ease-in-out alternate;
    border-bottom: 5px solid var(--sidebar-active-border);

}


@keyframes color_change {
    from {
        border-bottom: 2px solid rgb(224, 37, 234);
    }

    to {
        border-bottom: 2px solid var(--sidebar-active-border);
    }
}