/* StyleSheet for JS Documentation 
@author : Anandhakrishnan M
*/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
:root {
    --TextBlue: rgb(4, 158, 247);
    --deepBlue: rgb(26, 101, 145);
    --blue: rgb(9, 58, 87);
    --white: rgb(247, 247, 247);
    --black: rgb(29, 28, 28,0.5); 
    --shade: rgb(114, 112, 112,0.2);
    --hoverBlue: rgb(12, 83, 141); 
}
body {
    font-family: 'Lora', serif;
    background: url('images/triangle-mosaic.png');
    background-attachment: fixed;
}
.line{
    width: 40px;
    height: 5px;
    margin-top: 4px;
    background-color: var(--white);
    }
.burger{
       display: none;
    }
#navbar {
    width: 25vw;
    height: 100vh;
   overflow-y: scroll;
   position: fixed;
   background-color: var(--blue);
}
#navbar li a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.1rem;
    margin-left: 1vw;
}
#navbar li:hover {
    background-color: var(--hoverBlue);
    border-radius: 5px;
}
#favicon{
    display: none;
}
#navbar li{
    margin-top: 1vh;
    width: 100%;
    list-style: none;
    padding: 1vw;
}
#navbar ul{
    width: 100%;
}
#nav-head{
    font-size: 1.5rem;
    text-align: center;
    padding: 2vw;
    background-color: var(--black);
    color: var(--TextBlue);
}
#main-doc{
    width: 60vw;
    margin-left: 32vw;
    text-align: justify;
    margin-top: 18vh;
    position: absolute;
    padding-bottom: 10vh;
}
.section-head{
    color: var(--deepBlue);
    font-size: 1.8rem;
    margin-top: 6vh;

}
.section-article{
    margin-top: 2vh;
    font-size: 1.1rem;
}
.para{
    margin-top: 2vh;
}
.list{
    margin-top: 2vh;
    margin-left: 4vw;
}
.list-item{
    margin-top: 2vh;
}
.code-section{
    margin-top: 4vh;
    margin-bottom: 2vh;
    padding: 2vw;
    background-color: var(--shade);
    border-radius: 10px;
}
@media screen and (max-width: 576px){
    
    #navbar{
        width: 100vw;
        z-index: 1;
        height: 10vh;
        overflow: hidden;
    }
    body{
        overflow-x: hidden;
    }
    #nav-head{
     position: absolute;
     width: 100vw;
     height: 10vh;
     text-align: left;
     padding-top: 3vh;

    }
    #main-doc{
        width: 85vw;
        margin-left: 6vw;

    }
    .burger{
        display: block;
        position: absolute;
        top: 3vh;
        right: 5vw;
    }
    .links li {
        margin-left: 0vh;
        text-align: center;
    }
    .links{
        position: absolute;
        top: 10vh;
        background-color: var(--blue);
        overflow-y: hidden;
        height: 100%;

    }
   

  
}