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

body {
    margin: 0;
    background: #2a3030;
    color: hsl(0, 0%, 90%);

    font-family: "Noto Sans Display", sans-serif;
    font-size: 11pt;
}

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;
}

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

pre > code {
    font-size: 10pt;
}

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;
}