@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

:root {
    background  : black;
    color       : white;
    font-size   : 12pt;
    line-height : 1.4;

    --bg1: #101317FF; /* the background */
    --bg2: #14171FFF; /* code blocks/other inset blocks */
    --bg3: #1A1F24FF; /* content, navbar */
    --bg4: #32473A7F; /* text symbols */

    --fg1: #91A4A9FF; /* sidenotes, code blocks */
    --fg2: #D3E0DDFF; /* paragraphs */
    --fg3: #ECFCFFFF; /* headings */
    --fg4: #ECFCFFFF; 

    --link1: #2C6EC5FF; /* base <a> */
    --link2: #6B5693FF; /* visited <a> */

    --border: #313B43FF;

    --section-l1: #5A8F55AF;
    --section-l2: #7D8D44AF;
    --section-l3: #715D36AF;

    --scrollbar-thumb: #A6B0C3FF;
    --scrollbar-track: #343F49FF;

    --code: #4DAC86FF;
}

/* ================= COLORS ================= */
:root, html, body { 
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    background: var(--bg1); 
    color     : var(--fg2);
}
.toc-box, .code-block   { background: var(--bg2); }
.content, .navbar       { background: var(--bg3); }
.text-symbol            { background: var(--bg4); }

h1, h2, h3  { color: var(--fg3); }
a           { color: var(--link1); }
a:visited   { color: var(--link2); }
.sidenote   { color: var(--fg1); }

.code-block, .inline-code { color: var(--code); }

.section-level-1 { border-left: 1px solid var(--section-l1); }
.section-level-2 { border-left: 1px solid var(--section-l2); }
.section-level-3 { border-left: 1px solid var(--section-l3); }

img, .code-block, .toc-box, .navbar { border: 2px inset var(--border); }

/* ========================================== */

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

h1, h2, h3 { 
    display: inline-block;
    font-family: serif;
    font-weight: 500;

    a { color: inherit; text-decoration: inherit; }
    a:visited { color: inherit; text-decoration: inherit; }
    a:hover::before { content: '§' }
}

img { margin-block:  6pt  12pt; }
p   { margin-block:  6pt  12pt; }
.section-level-1, :not(.section-level-1)>h1 { margin-block: 18pt  6pt; } 
.section-level-2, :not(.section-level-2)>h2 { margin-block: 10pt  3pt; }
.section-level-3, :not(.section-level-3)>h3 { margin-block:  8pt  3pt; }

code, pre {
    font-family: "Inconsolata";
    font-weight: 400;
    font-style: normal;
}

.navbar {
    display   : inline-block;
    width     : 100%;
    font-size : 1.5em;

    padding-block : 0.5em;
    border: none;

    filter: drop-shadow(0 0 4pt black);

    a {
        margin-inline: 1em;
    }

}

.content {
    grid-column: 2;

        width     : 75ch;
    max-width     : 75ch;
    margin-left   : calc(33vw - 75ch/2);
    padding-inline: 1ch;
    padding-top   : 1em;
    padding-bottom: 33vh;
    min-height    : calc(100vh - 3.5em); /* This is such a bodge... navbar has height: 1.5em, padding-top: 0.5em, padding-bottom: 0.5em and this has padding-top: 1em... */
    
    filter: drop-shadow(0 8.5pt 4pt black);

    p {
        letter-spacing: 0.2pt;
    }

    .inline-code {
        display: inline;
        max-width: 100%;
        overflow-x: clip;
    }

    .code-block {
        padding: 4pt;
        max-width: 100%;
        overflow-x: auto;

        .wide { display: block; }
        .slim { display: none; }
    }

    img {
        display       : block;
        margin-inline : auto;

        width : 100%;
        height: auto;
    }

    .link-box {
        font-family: monospace;
        font-weight: 200;
        color: var(--fg1);
        text-decoration: none;
        border: 2px outset var(--border);
        border-style: outset;

        margin-left   : 1ch;
        font-size     : 1em;
        padding-inline: 0.5ch;
        vertical-align: baseline;

        transition: ease-out border-style 0.15s;
        &:hover {  }
    
    }

    transform : translateX(0%);
    transition: ease-out transform .5s, ease-out margin-left .5s;

    table {
        border-spacing: 1em 0;
        border-collapse: collapse;
        td {
            padding-right: 1em;
        }
    }
}

.section-level-1, .section-level-2, .section-level-3 { 
    border-left-style: solid;
    border-radius: 5px; 
    padding-inline: 1ch; 
}

/* Kinda stolen from gingerBill's amazing site at: gingerbill.org */
.sidenote {
    float: right; 
    clear: right; 
    width: 37.5vw; 
    position: relative; 
    margin-right: -40vw; 
    text-shadow: 1px 1px 2px black;
}

.sidenote-number {
    color: var(--link1);
    text-decoration: underline;
    vertical-align: super;
    font-size: 0.83em;
}

#sidenote-table {
    margin-top: 12pt;
    display: none;
}

.toc-box {
    padding: 0.25em 1em;

    label {
        cursor: pointer;
        i::after { content: 'expand' } /* This is so going to bite me in the ass when I will want translations to Lithuanian or whatever... */
    }
    input[type="checkbox"]:checked + label>i::after { content: 'collapse' }

    .collapsed-list>li:not(:nth-child(-n+12)) {
        display: none;
    }
}

.table-of-contents {
    list-style-type: none;


    a {
        margin-left: 0.5em;
    }

    .toc-level-1 { margin-left: 0rem }
    .toc-level-2 { margin-left: 1rem }
    .toc-level-3 { margin-left: 2rem }
    .toc-level-4 { margin-left: 3rem }
}

.my-photo {
    display : inline !important; 
    width   : 39%    !important; 
    float   : right;

    margin-block : 0em;
    margin-left  : 2em; 
    margin-right : 4em; 
}

@media (max-width: 1260px) {
    .sidenote-number { cursor: pointer }
    .sidenote { display: none }
    
    .content {
        max-width   : 80vw;
        width       : 65vw;
        margin-left : 50%;
        transform   : translateX(-50%);
    }

    #sidenote-table {
        display: block;
    }
}

@media (max-width: 800px) {
    .content {  
        max-width : 90vw;
        width     : 90vw; 
    }
}

@media (max-width: 996px) and (pointer:coarse) and (orientation: portrait) { 
    :root { font-size: 22pt; }
    .content { width: 90vw; max-width: 90vw; } 
    .code-block .wide { display: none  !important; }
    .code-block .slim { display: block !important; }
}

.text-symbol {
    padding-inline: 2pt;
    padding-block : 1pt 0.5pt;
}

.references {
    list-style-position: outside;
    margin-left: 1.5em;
}

td:first-of-type {
    text-align: right;
}

ol {
    list-style: none;
}