* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    display: flex;
}


/* ---- Nav on the left of the screen ---- */
#navbar {
    height: 100vh;
    width: 250px;
    overflow-y: auto;

    background-color: #EFEFEF;
}

#nav-header {
    margin-top: 15px;

    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

#nav-links-container {
    margin-top: 20px;
    padding: 0 15px;

    display: flex;
    flex-direction: column;    
}

.nav-link {
    margin-bottom: 10px;
    padding: 7px 20px;

    color: black;
    border-radius: 10px;
    text-decoration: none;
    background-color: #D9D9D9;
}
.nav-link:hover {
    background-color: #c9c9c9;
}


/* ---- Main doc section ---- */
#main-doc {
    height: 100vh;
    width: calc(100vw - 250px);
    padding: 30px;

    overflow-x: hidden;
    overflow-y: auto;    
}

#main-doc p, #main-doc ul {
    line-height: 25px;
}

#main-doc code {
    border-radius: 5px;
    line-height: normal;
}

.main-section {
    scroll-margin-top: 10px;
}

.section-header {
    padding-bottom: 5px;
    
    font-size: 30px;    
    border-bottom: 1px solid black;
}


/* ---- Mobile styles ---- */
@media (max-width: 650px) {
    body {
        flex-direction: column;
        text-align: justify;
    }

    #navbar {
        height: auto;
        width: 100vw;
    }

    #main-doc {
        height: auto;
        width: 100vw;
        padding: 15px;
    }
}


/* ---- highlight.js; Source: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-light.min.css ---- */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: StackOverflow Light
  Description: Light theme as used on stackoverflow.com
  Author: stackoverflow.com
  Maintainer: @Hirse
  Website: https://github.com/StackExchange/Stacks
  License: MIT
  Updated: 2021-05-15

  Updated for @stackoverflow/stacks v0.64.0
  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}