@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap");

body {
    margin: 0;
    font-family: "Noto Sans Display", sans-serif;
    font-size: 11pt;

    background: #2a3030;
    color: hsl(0, 0%, 90%);
}

hr {
    margin: 30pt 0;
    height: 0px;
    border: none;
    border-top: 1px dashed silver;
}

h1 {
    font-size: 20pt;
}

h2 {
    font-size: 14pt;
}

p, li {
    font-size: 12pt;
    line-height: 1.28em;
}

h2 {
    margin-top: 30pt;
}

header {
    h1 {
        color: #82ae52;
        margin-bottom: 4pt;
    }
    h2 {
        color: #ecb958;
        margin: 0;
    }
    p.date {
        margin: 0;
        color: silver;
        font-weight: bold;
        letter-spacing: 2px;
    }
}

p > span.pre {
    display: inline;
    background: hsl(0, 0%, 90%);
    color: #13161d;
    border-radius: 4px;
    padding-inline: 4px;
}

a {
    color: hsl(220, 80%, 70%);
}

#header {
    display: block;
    background: #1b1b22;
    box-shadow: 0px 0px 1px 1px #fbf7ed;
    img {
        display: block;
        max-height: 120px;
        object-fit: contain;
    }
}

div#content, #header > img {
    width: 100%;
    max-width: 600px;

    box-sizing: border-box;
    margin-left: clamp(0px, calc((100vw - 600px) / 2), 100px);
    margin-right: auto;
}

div#content {
    padding: 0px 10px;
}

img {
    max-width: 100%;
}

ol, ul {
    padding-inline-start: 1.5em;
}

li {
    margin-bottom: 0.2em;
}

a {
    color: hsl(220, 80%, 70%);
}

pre, pre code {
    background: GainsBoro;
    color: DarkGreen;
    line-break: loose;
    font-size: 10pt;
}

p > code, li > code {
    border-radius: 2px;
    padding: 1px 6px;
    font-size: 10pt;

    background: GainsBoro;
    color: DarkGreen;
}

pre {
    border-radius: 4px;
    padding: 10px 20px;
    white-space: break-spaces;
    box-shadow: 0px 2px 2px 0px hsl(140, 20%, 10%);
    overflow: overlay;
}

blockquote {
    margin: 0;
    padding: 10px 20px;
    background: #383831;
    border-left: 10px solid #ecb958;
}

@media print {
    body {
        background: unset;
        color: #444;
    }

    header {
        filter: brightness(0.8) saturate(1.2);
    }

    div#content, #header > img {
        max-width: unset;
        margin: 0;
    }

    pre {
        box-shadow: none;
        border: none;
    }

    h2 + p, h3 + ul, li, pre {
        break-before: avoid;
    }

    p, li, ul, pre {
        break-inside: avoid;
    }

    svg {
        display: block;
        margin: 0 auto;
        max-height: 270mm;
        /* break-before: avoid; */
        /* break-inside: avoid; */
    }

    hr {
        display: none;
    }
}