*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    flex-direction: column;
    background-color: rgb(185, 183, 183);
}

#navbar{
    /* width: 100vw; */
    background-color: rgb(185, 183, 183);
    position: relative;
    text-align: center;
    display: ;
    border-bottom: 1px solid black
}

#navbar-id{
    display: ;
}

.nav-link{
    list-style: none;
    margin: 1rem;
    border-bottom: 2px solid black;

    padding:3px;
}

.nav-link:hover{
    background-color: turquoise;
    border-color: blue;

}



a{
    text-decoration-line: none;
    font-weight: bolder;
    color: blue;

}

code{
    background: white;
}

#main-doc {
    /* width: 100vw; */
    height: 100vh;
    text-align: start;
}

h2{
    text-align: center;
}

.main-section{
    /* height: 100vh; */
    background-color: rgb(196, 234, 245);
    padding: 1rem;
    margin: 1rem;
}




@media screen and (min-width:768px) {
    body{
        display: flex;
        flex-direction: row;
    }

    #main-doc{
        margin-left: 18vw;
        width: 100%;
        text-align: initial;
    }
    
    #navbar{
        height: 100vh;
        width: 18vw;
        background-color: rgb(185, 183, 183);
        position: fixed;
        border-right: 1px solid black;
    }

    .nav-link:hover{
        background-color: turquoise;
        border-color: blue;

    }

    #navbar-id{
        display: flex;
        flex-direction: column;
    }
}