html,body{
      color: #2c2c2e;
      background-color: #f4f4f4;
      font-family: 'Open Sans',Arial,sans-serif;
      line-height: 1.5;
  }
  #navbar{
      position: fixed;
      top:0;
      left:0;
      width: 300px;
      height:100%;
      border-right:solid;
      border-color:rgba(0,22,22,0.4);
  }
  #navbar header{
      font-size: 25px;
      text-align: center;
      background-color: lightgreen;
  }
  #navbar a{
      text-decoration: none;
  }
  #navbar a:hover{
      color: lightcoral;
  }
  #navbar li{
      list-style: none;
  }
  #main-doc{
      position: absolute;
      margin-left: 310px;
  }
  #main-doc header{
      font-size: 30px;
  }
  code{
    display:block;
    text-align: left;
    white-space: pre;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color:black;
    color: lightgreen;
    padding:15px;
    margin:10px;
    border-radius:5px;
    width: 1000px;
  }
  @media only screen and (max-width: 815px) {
    /* Mobile Phones*/
  #navbar{
    background-color:#f4f4f4;
    position:absolute;
    top:0;
    padding:0;
    margin: 0;
    width:100%;
    max-height:275px;
    border:none;
    z-index:1;
    border-bottom:2px solid;
  }
  #main-doc{
    position: relative;
    margin-left:0px;
    margin-top:270px;
  }
  }