/* On screens that are less than 700px wide, make the sidebar into fullscreen */
@media screen and (max-width: 700px) {
    .sidebar{
        width: 100%;
        height: 100%;
        padding-left: 10%;
    }
    .sidebar a{
        padding-left: 10px;
    }
    .sidebar h1{
        margin-left: 0px;
        font-size: 25px;
    }
    .content{
        display: none;
    }
}

/* On screens that are less than 400px, remove the padding */
@media screen and (max-width: 400px) {
    .sidebar{
        padding: 0%;
    }
    .sidebar a{
        padding-left: 16px;
    }
    .sidebar h1{
        margin-left: 16px;
    }
}

/* Focused link */
.sidebar a:focus-visible, .sidebar a:focus{
    outline: 0px;
    background-color: rgba(79, 84, 92, 0.16);
    color: #dcddde;
}

/* Active link */
.sidebar a.active {
    background-color: rgba(79,84,92,0.24);
    color: #ffffff;
}

/* Hovered link */
.sidebar a:hover:not(.active) {
    background-color: rgba(79, 84, 92, 0.16);
    color: #dcddde;
}

/* Disabled link */
.sidebar a.disabled{
    cursor: not-allowed;
}