/* START - GENERIC */

:root {
    --nav-width: 60px;
    --contentwidth: min(90%, 1000px);
    --whitespace: calc((100% - var(--contentwidth)) / 2);
    --col-bg: #202020;
    --col-code: #303030;
    --col-nums: #3b3b3b;
    --col-numb: #777;
    --col-border: #555;
    --col-text: #ddd;
    --col-text-title: white;
    --col-text-link: #bbbbff;
    --col-text-visited: #ddbbff;
    --font: 'DM Sans', sans-serif;
    --font-mono: 'DM Code', monospace;
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --col-bg: white;
        --col-code: #eaeaea;
        --col-nums: #ddd;
        --col-numb: #555;
        --col-border: #aaa;
        --col-text: #333;
        --col-text-title: #222;
        --col-text-link: #3333ff;
        --col-text-visited: #8833ff;
        color-scheme: light;
    }
}

body {
    margin: 0;
    background-color: var(--col-bg);
    display: grid;
    grid-template-columns: 200px auto;
}

/* END - GENERIC */
/* START - NAVMENU */

.navbar {
    /* width: var(--nav-width); */
    min-height: 100vh;
    background-color: var(--col-code);
    /* box-shadow: var(--col-shadow) 1px 0 5px; */
    border-right: 1px solid var(--col-border);
    /* position: fixed; */
}

.navbar > div {
    position: fixed;
}

#navhead {
    background-color: var(--col-nums);
    padding: 5px;
    width: 189px;
    border-bottom: 1px solid var(--col-border);
    text-align: right;
}

#navhead span {
    margin: 1px;
    color: var(--col-numb);
    font-family: var(--font-mono);
}

#nav {
    padding: 5px;
}

#nav h2 {
    color: var(--col-text-title);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: medium;
    margin: 0;
}

#nav pre {
    color: var(--col-text);
    font-family: var(--font-mono);
    margin: 0;
}

#nav a {
    color: var(--col-text);
}

/* END - NAVMENU */
/* START - CONTENT */

p, li, a {
    color: var(--col-text);
    font-family: var(--font);
}

p {
    text-align: justify;
}

h1 {
    color: var(--col-text-title);
    font-family: var(--font);
    font-weight: 700;
}

h2, h3 {
    color: var(--col-text-title);
    font-family: var(--font);
    font-weight: 700;
}

h3 {
    font-size: medium;
    margin: 10px 0;
}

ul {
    margin: 10px 0;
}

.content {
    padding: 0 var(--whitespace) 0 var(--whitespace);
}

.withimg {
    display: flex;
    flex-direction: row;
}

.withimg > div {
    margin: 0 15px;
}

.withimgfirst {
    margin-top: 0;
}

#footer {
    background-color: var(--col-code);
    border-top: 1px solid var(--col-border);
    text-align: center;
    padding-bottom: 3px;
}

#footer span {
    margin: 0;
    padding-top: 1px 0 1px 0;
    color: var(--col-numb);
    font-family: var(--font-mono);
}

a {
    color: var(--col-text-link);
}

a:visited {
    color: var(--col-text-visited);
}

/* END - CONTENT */
/* START - CODEBLOCK */

.codeblock {
    /* width: 800px; */
    margin: 15px;
    padding: 0;
    border-radius: 5px;
    color: var(--col-text);
    font-family: var(--font-mono);
    display: grid;
    grid-template-areas: 
        "footer footer"
        "rownum code";
    grid-template-columns: 50px auto;
}

.codeblock > * {
    outline: 1px solid var(--col-border);
    margin: 0;
    background-color: var(--col-nums);
}

.rownum {
    grid-area: rownum;
    border-bottom-left-radius: 5px;
    padding: 5px;
    background-color: var(--col-nums);
}

.code {
    grid-area: code;
    border-bottom-right-radius: 5px;
    padding: 5px;
    background-color: var(--col-code);
}

.code > pre, .rownum > pre, .footer > pre {
    margin: 1px;
    color: var(--col-text);
    font-family: var(--font-mono);
}

.rownum > pre, .footer > pre {
    text-align: right;
    color: var(--col-numb);
}

.rownum > pre {
    user-select: none;
}

.footer {
    grid-area: footer;
    border-radius: 5px 5px 0 0;
    padding: 5px;
    margin-bottom: -1px;
}

.sb {
    color: #399AE5;
}

.so {
    color: #E27738;
}

.sg {
    color: #777;
}

.si {
    font-style: italic;
}

/* END - CODEBLOACKS */
/* START - REACTIVITY */

@media screen and (max-width: 800px) {
    body {
        display: grid;
        grid-template-columns: 100%;
    }

    .navbar {
        display: none;
    }
}

@media screen and (max-width: 500px) {

    .withimg {
        flex-direction: column;
    }

    .withimg > img {
        margin: auto !important;
    }

    .code {
        overflow-x: scroll;
        scroll-behavior: unset;
    }
}

@media print {
    body {
        display: grid;
        grid-template-columns: 100%;
    }

    .navbar {
        display: none;
    }
}

/* END - REACTIVITY */