:root {
  --light-gray: #F4F4F4;
  --dark-gray: #393D3F;
  --blue: #62929E;
}
/* For FCC testing */
#navbar {
    position: fixed;
    top: 0;
}
body {
    margin: 0;
}
/* 
Navigation Bar 
Modified CSS code from W3Schools navbar examples: https://www.w3schools.com/Css/css_navbar.asp
*/
#navbar {
    font-family: "Open Sans", arial, sans-serif;
}
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: var(--light-gray);
    position: fixed;
    top: 0;
    height: 100%;
    overflow: auto;
}
#navbar-header {
    text-align: center;
}
.nav-link {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.nav-link.active {
    background-color: var(--blue);
    color: white;
}
.nav-link:hover:not(.active) {
    background-color: var(--dark-gray);
    color: white;
}
main#main-doc {
    margin-left: 25%;
    padding: 20px;
}
@media screen and (max-width: 500px) {
    #navbar {
        position: relative;
    }
    #navbar ul {
        width: 100%;
        height: 50vh;
        overflow: auto;
        position: relative;
    }
    .nav-link {
        text-align: center;
        float: none;
    }
    main#main-doc {
        margin-left: 0;
    }
}
/* Main Section */
#title {
    text-align: center;
}
.underline {
    text-decoration: underline;
}
main {
    line-height: 1.5;
    font-family: "Open Sans", arial, sans-serif;
}
code {
    margin-top: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
    font-family: "Open Sans", arial, sans-serif;
}
main ul {
    list-style-type: none;
}
main li {
    margin-top: 16px;
    margin-bottom: 16px;
}