* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Monospace, Courier;
    background-color: #000000;
}

/* side navigation */
.sidenav {
    height: 100%;
    width: 28%;
    float:left;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #000000;
}

/* separator */
.sidenav div.separator {
    color: #55ffff;
    padding: 10px;
    text-decoration: none;
    display: block;
}

/* main links */
.sidenav a.main_link {
    color: #00ff00;
    padding: 10px;
    text-decoration: none;
    display: block;
}

.sidenav a.main_link:hover {
    background-color: #00ff00;
    color: #000000;
}

.sidenav a.main_link_lab {
    color: #ffff00;
    padding: 10px;
    text-decoration: none;
    display: block;
}

.sidenav a.main_link_lab:hover {
    background-color: #ffff00;
    color: #000000;
}

/* sub links */
.sidenav a.sub_link {
    color: #00aa00;
    padding: 15px;
    text-decoration: none;
    display: block;
}

.sidenav a.sub_link:hover {
    background-color: #00aa00;
    color: #000000;
}

.sidenav a.sub_link_lab {
    color: #aaaa00;
    padding: 15px;
    text-decoration: none;
    display: block;
}

.sidenav a.sub_link_lab:hover {
    background-color: #aaaa00;
    color: #000000;
}

/* active link */
.sidenav a.active {
    background-color: #00ff00;
    color: #000000;
    padding: 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
}

.sidenav a.active_lab {
    background-color: #ffff00;
    color: #000000;
    padding: 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
}

/* active sub link */
.sidenav a.sub_active {
    background-color: #00aa00;
    color: #000000;
    padding: 15px;
    text-decoration: none;
    display: block;
}

.sidenav a.sub_active_lab {
    background-color: #aaaa00;
    color: #000000;
    padding: 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
}

.header {
    padding-top: 5px;
    padding-bottom: 5px;
    color: #55ffff;
}

.sheader {
    padding-top: 3px;
    padding-bottom: 3px;
    color: #55ffff;
}

/* Code */
.code_python {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4ch;
    color: #00ff00;
    text-decoration: none;
}


/* links in content */
a:link{
    color: #ff5555;
    text-decoration: none;
}
a:visited{
    color: #aa0000;
    text-decoration: none;
}

/* for smaller devices */
@media screen and (max-width: 1020px) {
    .sidenav {
        width:100%;
        padding: 10px;
    }
    .content {
        /*margin-left: 200px;*/
        width:100%;
        padding-left: 20px;
        padding: 10px;
        background-color: #000000;
        color: #ffffff;
    }
}

/* for desktop computers */
@media screen and (min-width: 1020px) {
    .sidenav {
        width: 280px;
    }
    .right {
        margin-left: 280px;
        padding-left: 20px;
        background-color: #000000;
        color: #ffffff;
        height: 100vh;
        overflow: auto;
    }
    .content {
        width:80ch;
        height: 100%;
    }
}