#navbar{position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        background-color: rgb(41, 41, 46);
        padding-bottom: 100%;
        color:rgb(214, 214, 233);}

#main-doc{margin-left: 280px;}

@media (max-width: 768px) {
  #navbar {
    position: relative;
    width: 100%;
  }
  #main-doc {
    margin-left: 0;
  }
}

.nav-link{text-decoration:none;
        font-size: 20px;
        display: block;
        padding: 16px;
        border-bottom: 1px solid rgb(214, 214, 233);
        color:rgb(214, 214, 233);}

.nav-link:hover{background-color: rgb(214, 214, 233);
                color: rgb(41, 41, 46);}

body{background-color: rgb(214, 214, 233);
    padding: 20px;
    font-family:Arial, Helvetica, sans-serif;}

header{font-size: 30px;
    font-weight:bold;
    border-bottom: 2px solid rgb(41, 41, 46);
    padding-bottom: 10px;}

.header-nav{padding-bottom: 30px;
            padding-left: 15px;
            padding-top: 15px;}

code{background-color: rgb(180, 180, 198);
    padding: 15px;
    margin-left: 40px;
    display:block;
    font-family:'Courier New', Courier, monospace;}

p{margin-left: 40px;}

li{margin-left: 40px;
    font-size: 15px;}

.main-section{margin-bottom: 40px;}