*{
     box-sizing:border-box ;
     padding: 0;
     margin: 0;
}
body {
     height: 100vh;
     scroll-behavior: smooth;
}
p,ul {
     color: #656a70;
   font-size: 1.2rem;
     line-height: 1.4;

}
p {
     padding: 0.5% 2%;
}
ul {
     padding: 0% 9%;
}
li {
     line-height: 1.6;
}
.flex {
     display: flex;
     /* justify-content: center; */
     /* align-items: center; */
}
.container {
     height: 100vh;
     width: 100%;
     position: relative;
}
.navbar {
     border-right: 3px solid #9d9ea0;
     width: 60%;
     
}
.navbar_heading,.navbar a:link {
     padding: 5% 10% 3% 10%;
     display: block;
     border-bottom: 2px solid #9d9ea0;
     
}

.navbar a:link {
     color: #606062;
     text-decoration: none;
}
.navbar a:link:hover {
     color: black;
     text-decoration: underline;
     transition: all 0.5s ease-in-out;
}
#main-doc {
     height: 100vh;
     overflow-y: scroll;
     padding:0% 3%;
}
.section_header {
     font-size: 2rem;
     margin:  1% 0%;
     scroll-margin-top: 50px;
     border-left: 2px solid #606062;
     padding-left: 1%;
}
.m-2 {
     margin-top:3% !important;
}
.code {
     margin: 2% 0%;
     margin-left: 4%;
     background-color: #f7f7f7;
     font-size: 90%;
     word-spacing: 6px;
     line-height: 2;
     color: #606062;
     border-radius: 5px;
}
.list_ele-sub {
     padding: 0% 4% ;
}
#Reference {
     margin-bottom: 5%;
}

@media (max-width:700px){
    .container{
     flex-direction: column;
    }
    .navbar {
     width: 90%;
     height: 50%;
     margin: 3% auto;
     overflow-y: scroll;
     border: 2px solid #656a70;

   
    }
    .navbar_heading {
     font-size: 1rem;
     text-wrap: nowrap;
    }
}