@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400&display=swap');
body{ 
   
    margin: 0%;
    padding: 0%;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
}
 header{ 
   font-size: 25px;
  margin: 10px;
   font-weight: 500;
   text-align: center;
   
 }
nav{ 
    width: fit-content;
    height: 100%;
    border-right: 4px solid rgb(149, 146, 146);
    position: fixed;
    /* margin-bottom: 100px; */
    top: 0%;
    
}
#nav-bar a{ 
  text-decoration: none;
  color: rgb(63, 61, 61);
} 
#nav-bar > ul > li{ 
list-style: none;
  font-size: 16px;
 text-align: start;
 border: 0.5px solid black;
 padding: 10px 15px 10px 15px;
font-weight: 400;
}
ul{
  padding: 0%;
  height: 88%;
  overflow-y: auto;
  overflow-x: hidden;
  /* background-color: rgb(245, 245, 245); */
}

@media  screen and (max-width:320px)  { 

  nav{ 
      width: 100%;
      height: 210px;
      background-color: white;
      position: relative;
  }
  ul{ 
    background-color: white;
  }
  main{ 
    margin: 0%;
  }
  #main-doc{ 
    margin-left: -40px;
    padding: 0%;
  }
  
}
@media  screen and (max-width:375px){ 
  nav{ 
    width: 100%;
   height: 210px;
   background-color: white;
   position: relative;
  }
  ul{ 
    background-color: white;
  }
  main{ 
    margin: 0%;
  }
  #main-doc{ 
    margin-left: -40px;
    padding: 0%;
  }
}
@media  screen and (max-width:425px){ 
  nav{ 
    width: 100%;
    height: 210px;
    background-color: white;
    position: relative;
  }
  ul{ 
    background-color: white;
  }
  #main-doc{ 
    margin-top: 25px;
    margin-left: 1px;
  }
}
@media  screen and (max-width:768px){ 
  nav{ 
    width: 100%;
    height: 210px;
    background-color: white;
    position: relative;
  }
  ul{ 
    background-color: white;
  }
  #main-doc{ 
    margin-top: 25px;
    margin-left: 1px;
  }
}
main{ 
  max-width: 1070px;
  margin-left:300px ;
  padding: 20px;
}


#main-doc header{ 
text-align: left;
}
#main-doc ul { 
  margin-left: 25px;
}
#main-doc li{ 
  margin-bottom: 5px;
 list-style-position: outside;
margin-left: 20px;
}
#main-doc article{
 margin-left: 20px;
 }
 #main-doc p ,li {
   font-size: 15px;
   color: rgb(63, 61, 61);
 }
  
 code p { 

  font-family: monospace;
 background-color:rgb(241, 241, 241);
 height: 100%;
 max-width: 100%;
 padding: 20px 20px 20px 20px;
 border-radius: 5px;
 
 } 

 #liststylecir{ 
   margin-left: 20px;
   list-style: circle;
   list-style-position: outside;
 }