/* The sidebar menu */

.sidenav {
    /* Do not use height and width to ensure auto responsiveness*/
    height: 100%;
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 15px;
    /* Stay at the top */
    right: 6px;
    background-color: rgba(0,0,0,0);
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    /*padding-top: 100px;*/
    padding: 50px 20px;
    list-style: none;
    border-radius: 4px;
    text-align: right;
}

/* The navigation menu links */

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 1em;
    color: white;
    display: block;
}

/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: #efaf23;
    transition: all ease 0.3s;
}

.sidenav a:active {
    color: #efaf23;
    transition: all ease 0.3s;
}
.sidenav a:hover:not(.active) {
    color: #efaf23;
    transition: all ease 0.3s;
}

/* Style page content */

.main {
    margin-right: 160px;
    font-size: 1em; /*Slightly redundant as I only have links*/
    /* Same as the width of the sidebar */
    padding: 0px 10px;
}

/* Page content. The value of the margin-right property should match the value of the sidebar's width property */

div.content {
    /*margin-right: 200px;*/
    padding: 1px 16px;
    height: 1400px;
}

/* On screens that are less than 1440px wide, make the sidebar into a topbar */

@media screen and (max-width: 1400px) {
    .sidenav {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidenav a {
        float: left;
    }
    div.content {
        margin-left: 0;
    }
}

/* On screens that are less than 475px, display the bar vertically, instead of horizontally */

@media screen and (max-width: 475px) {
    .sidenav a {
        text-align: center;
        float: none;
    }
}