@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
    --width: 100ch;

    --background: #435;
    --dark-background: #213;
    --code-background: #2f222f;
    --font: #d7cad7;
    --header: #99b;
}

@media screen and (max-width: 1200px) {
    :root {
        --width: 95%;
    }
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;

    background-color: #435;
    color: #d7cad7;
}

body {
    font-family: Libertinus Serif, serif;
    font-size: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}

main {
    flex-grow: 1;
    flex-basis: 100%;
    width: var(--width);
    line-height: 1.5;
    hyphens: auto;
}

blockquote {
    background-color: var(--code-background);
    border-left: 4px solid var(--font);
    margin-left: 0;
    padding: 0.5rem 1rem;
    border-radius: 4px;

    >*:first-child {
        margin-top: 0;
    }

    >*:last-child {
        margin-bottom: 0;
    }
}

.footdef sup {
    float: left;
    margin-right: 0.5rem;
}

h1,h2,h3,h4,h5 {
    color: #99b;
}

.sameline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem auto;
    
    img {
        display: block;
        min-width: 300px;
        max-width: calc(var(--width) * 0.95);
        max-height: 600px;
    }

    p {
        max-width: calc(var(--width) * 0.95);
        margin: 0.5rem 0;
    }
}

#table-of-contents {
    border: 2px solid #4c3677;
    border-radius: 4px;
    float: right;
    padding: 1rem;
    margin: 1rem;
    margin-top: 6rem;

    background-color: #213;

    h2 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        text-align: center;
    }

    ul {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

header, footer {
    color: #d7cad7;
    background-color: #213;
    font-family: Libertinus Serif, serif;
    width: 100%;
}

header div {
    width: var(--width);
    margin: 0 auto;

    display: flex;
    gap: 1rem;
    align-items: center;

    a {
        text-decoration: none;
    }

    img {
        width: 48px;
        image-rendering: crisp-edges;
    }
}

footer p {
    text-align: center;
    margin: 0.5rem 0;
}

code, pre {
    font-family: JetBrains Mono, Inconsolata, monospace;
}

a {
    color: #ede;

    &:visited {
        color: #cea0ce;
    }
}

code {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background-color: #2f222f;
    color: white;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    font-size: 18px;
    border-radius: 4px;
}

pre {
    padding: 0.25rem;
    border: 2px solid #888;
    border-radius: 4px;
    background-color: #222;
    color: #E6D5E3;
    overflow-x: auto;
    font-size: 20px;
    
    .linenr {
        color: #aaa;
        user-select: none;
    }

    .org-comment, .org-comment-delimiter {
        color: #eeeeaa;
    }
    
    .org-keyword {
        color: #fabc2a;
    }

    .org-type {
        color: #f58848;
    }

    .org-function-call, .org-function-name {
        color: #925e78;
    }

    .org-typescript-primitive {
        color: #c1596f;
    }
}