:root { color-scheme: dark; }
html, body { margin: 0; }

img {
    max-width: 100%;
    object-fit: contain;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    overflow-y: scroll;
}

body > header, main { width: 40em; }
body > header, main { padding: 0.5em; }

@media screen and (max-width: 40em) {
    body > header, main { width: calc(100% - 1em); }
}

body { line-height: 1.5; }
pre code { line-height: 1.3; }
h1, h2, h3, h4, h5 { line-height: 1.2; }
td { line-height: 1.2; }

body > header { text-align: center; }
body > header > h1 { margin-bottom: 0; }
body > header > p { margin: 0.3em 0; }

nav { padding: 0.3em 0; }
nav > ul { display: inline; padding: 0; }
nav > ul > li { display: inline; }
nav > ul > li + li:before { content: " | "; }

body > header > h1 > a {
    font-size: 1.75rem;
    text-decoration: inherit;
}

article > header > h1 { margin-bottom: 0.25em; }
article > header > p { margin-top: 0em; }

main { overflow: auto; }
pre { overflow: auto; }

code { font-size: 1rem; }
pre code { font-size: 0.8125rem; }

th, td { padding: 0.25em; }
pre { border: solid 1px; padding: 0em 0.25em; }
table, th, tr, td { border-collapse: collapse; border: solid 1px; }

main > ul { padding-left: 0em; }
main > ul > li { list-style: none; margin-bottom: 2em; }

ul { padding-left: 1.5em; }
li { margin-bottom: 0.5em; }

h1 { font-size: 1.6rem; font-weight: bold; }
h2 { font-size: 1.3rem; font-weight: bold; }
h3 { font-size: 1.2rem; font-weight: normal; }
h4 { font-size: 1rem; font-weight: bold; }
h5 { font-size: 1rem; font-weight: normal; }

:is(h1, h2, h3, h4, h5) :is(a:link, a:visited) { color: inherit; }

body {
    background-color: black;
    color: #c8c8c8;
}

body > main { border-bottom: 1px solid #4b4b4b; }
th { background-color: #4b4b4b; color: #dcdcdc; }
pre, table, th, tr, td { border-color: #5f5f5f; }
pre { background-color: black; }
tr:nth-child(even) { background-color: #222222; }

code {
    background-color: #363636;
    border-radius: 0.2em;
    padding: 0em 0.1em;
}

pre code {
    background-color: revert;
    border-radius: revert;
    padding: revert;
}

time {
	color: #808080;
}
body > header > h1 { color: white; }
nav.site { font-weight: bold; }
nav > strong { font-weight: bold; color: orange; }
h1, h2, h3, h4, h5 { color: white; }
a:link { color: #195271; }
a:visited { color: #4eb7f0; }
/* Also b5cea8 or 7dce52 or 7bbf56 */

/* Syntax highlighting */
.hljs-comment { color: #72a358; }

.hljs-tag,
.hljs-punctuation { color: #a1a1a1; }

.hljs-literal { color: #4eb7f0; }

.hljs-title.class_,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr { color: #7bbf56; }

.hljs-attr,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo { color: #59c5ff; }

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name { color: #4eb7f0; }

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-meta { color: #d97c57; }

.hljs-regexp,
.hljs-meta .hljs-string { color: #c27353; }

.hljs-title.function_,
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-selector-id,
.hljs-selector-class { color: #e6b95c; }