:root {
    --sidebar-width: 3.5vw;
}

/* sidebar stuff */
.sidebar {
    height: 100%; /* 100% Full-height */
    width: var(--sidebar-width); /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    top: 0;
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    z-index: 100;
}

.sidebar:hover {
    width: 11vw;
}

.sidebar a {
    padding: .4vw .4vw .4vw .4vw;
    display: block;
    color: white;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar a img {
    margin-right: .6vw;
    width: 2.5vw;
}

.sidebar a b {
    font-size: .85vw;
}

.sidebar a:hover {
    background-color: hsl(0, 0%, 8%);
    color: rgb(210, 210, 210);
}

@media screen and (max-width: 992px) {
    :root {
        --sidebar-width: 0px;
    }
    .sidebar {display: none;}
}