/**VARIABLES**/
:root {
    --navbar-width-long-screen: 300px;
    --content-width-long-screen: calc(100% - 300px);

    --navbar-width-short-screen: 100%;
    --content-width-short-screen: 100%;
}

/**RESET**/
html {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
  }

body {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(71, 71, 71);
}

/**GENERAL PROPERTIES**/
h1, h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 400;
    color: black;
}

/*NAVBAR*/
#navbar {
    width: var(--navbar-width-long-screen);
    height: 100vh;
    position:fixed;
    border-right: 3px solid gray;
    top:0;
    left: 0;
}

#navbar h1 {
    text-align: center;
    margin-top: 22px;
    margin-bottom: 11px;
}

#navbar .list-wrapper {
    height:100%;
    overflow-y: auto;
}

#navbar ul {
    list-style-type: none;
    padding:0;
}

#navbar li {
    border-top: 1px solid lightslategray;
    padding: 13px 0 13px 40px;
    
}

#navbar a {
    color: #5f5f5f;
    text-decoration: none;
}

/*MAIN CONTENT*/

#main-doc {
    width: var(--content-width-long-screen);
    position: absolute;
    right:0;
    top:0;
    padding: 35px;
}

#main-doc .section-title {
    font-size: 1.8rem;
}

#main-doc article {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9rem;
    line-height: 25px;
    margin: 25px 0 25px 30px;
}

#main-doc code {
    display: block;
    background-color: #eee;
    white-space: pre-line;
    border-radius: 5px;
    margin-left: 10px;
    padding: 18px 15px;
    font-size: 0.8rem;
}

#main-doc li {
    padding-bottom: 15px;
}
#main-doc .line-break::after {
    content: "\000A";
}

/*TABLET AND MOBILE SCREEN SETTINGS*/

@media (max-width: 768px) {
    #navbar {
        position: relative;
        width: var(--navbar-width-short-screen);
        border: none;
        max-height: 18rem;
    }
    
    #navbar .list-wrapper {
        position: relative;
        border-width: 2px 1px 2px 1px;
        border-style: solid;
        border-color: lightslategray;
        height: 15rem;
    }

    #navbar ul {
        margin: 0;
    }
    
    #main-doc {
        position: relative;
        width: var(--content-width-short-screen);
    }

}