:root {
	--bg:     #222222;
	--fg:     #bbbbbb;
	--bright: #eeeeee;
	--dim:    #767676;
	--border: #444444;
	--sel-bg: #005577;
	--sel-fg: #eeeeee;

	--mono: "DejaVu Sans Mono", "Liberation Mono", "Bitstream Vera Sans Mono",
	Menlo, Consolas, "Courier New", monospace;

	--col: 78ch;
	--gap: 1rem;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg:     #eeeeee;
		--fg:     #333333;
		--bright: #000000;
		--dim:    #6a6a6a;
		--border: #c4c4c4;
		--sel-bg: #005577;
		--sel-fg: #ffffff;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 15px;
	line-height: 1.55;
	word-wrap: break-word;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

a {
	color: var(--bright);
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:visited { color: var(--fg); }
a:hover,
a:focus {
	background: var(--sel-bg);
	color: var(--sel-fg);
	text-decoration: none;
}
a:focus-visible {
	outline: 1px solid var(--bright);
	outline-offset: 1px;
}

/* --- the bar ------------------------------------------------------- */

.bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 1ch;
	max-width: var(--col);
	margin: 0 auto;
	padding: 2px 1.5ch;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	font-size: 14px;
}
.bar a { text-decoration: none; padding: 0 0.5ch; }
.bar a[aria-current="page"] {
	background: var(--sel-bg);
	color: var(--sel-fg);
}
.bar .status {
	margin-left: auto;
	color: var(--dim);
	white-space: nowrap;
}

/* --- page frame ---------------------------------------------------- */

main {
	max-width: var(--col);
	margin: 0 auto;
	padding: 2rem 1.5ch 4rem;
}

section { margin: 0 0 2.5rem; }

/* --- headings: prefixed with their own markdown source ------------- */

h1, h2, h3, h4, h5, h6 {
	color: var(--bright);
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.35;
	margin: 2rem 0 0.75rem;
}

h1{font-size:2rem;margin-top:0rem;text-align:center;}
h2{font-size:1.4rem;margin-top:.75rem}
h3{font-size:1.1rem;margin-top:.65rem;border-bottom:1px solid var(--border);padding-bottom:.3rem}
h4{font-size:.95rem;margin-top:.5rem}
h5{font-size:.85rem;margin-top:.4rem}
h6{font-size:.78rem;margin-top:.35rem}

main :is(h1, h2, h3, h4, h5, h6)::before {
	color: var(--dim);
	font-weight: normal;
}

p { margin: 0 0 1rem; }

strong { color: var(--bright); font-weight: bold; }
em     { font-style: italic; }
del    { color: var(--dim); }
mark   { background: var(--sel-bg); color: var(--sel-fg); }
small  { color: var(--dim); font-size: 0.875rem; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

/* --- lists: markers mirror markdown bullet conventions -------------- */

.list-element { color: var(--sel-bg); }
ul, ol { margin: 0 0 1rem; padding-left: 3ch; }
li { margin: 0.15rem 0; }
li > ul, li > ol { margin: 0.15rem 0; }

ul { list-style: none; }
ul > li { position: relative; }
ul > li::before {
	content: "*";
	position: absolute;
	left: -2ch;
	color: var(--sel-bg);
}
@media (prefers-color-scheme: light) {
	ul > li::before { color: var(--sel-bg); }
}
ul ul > li::before { content: "-"; color: var(--dim); }
ul ul ul > li::before { content: "+"; color: var(--dim); }

ol { list-style: decimal; }
ol > li::marker { color: var(--dim); }

dl { margin: 0 0 1rem; }
dt { color: var(--bright); margin-top: 0.75rem; }
dd { margin: 0 0 0 3ch; color: var(--fg); }

/* --- quotes --------------------------------------------------------- */

blockquote {
	margin: 0 0 1rem;
	padding: 0 0 0 2ch;
	border-left: 1px solid var(--sel-bg);
	color: var(--dim);
}
blockquote > :last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; }

/* --- code: a pre is a window. focus it and the border lights up ----- */

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9375em; }

code {
	background: rgba(128, 128, 128, 0.18);
	padding: 0 0.4ch;
}

pre {
	margin: 0 0 1rem;
	padding: 0.75rem 1ch;
	border: 1px solid var(--border);
	overflow-x: auto;
	line-height: 1.45;
	tab-size: 4;
}
pre:hover, pre:focus { border-color: var(--sel-bg); outline: none; }
pre code { background: none; padding: 0; }

kbd {
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	padding: 0 0.5ch;
	color: var(--bright);
}

/* --- tables --------------------------------------------------------- */

table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1rem;
}
caption {
	text-align: left;
	color: var(--dim);
	padding-bottom: 0.4rem;
}
th, td {
	border: 1px solid var(--border);
	padding: 0.25rem 1ch;
	text-align: left;
	vertical-align: top;
}
th {
	color: var(--bright);
	font-weight: bold;
	border-bottom-color: var(--sel-bg);
}
tbody tr:hover { background: rgba(0, 85, 119, 0.28); }

/* --- media ---------------------------------------------------------- */

img, video { max-width: 100%; height: auto; border: 1px solid var(--border); }
figure { margin: 0 0 1rem; }
figure pre { margin-bottom: 0.4rem; }
figcaption { color: var(--dim); font-size: 0.875rem; }

/* --- post index ----------------------------------------------------- */

.posts { list-style: none; padding-left: 0; }
.posts > li::before { content: none; }
.posts li { margin: 0.35rem 0; }
.posts time { color: var(--dim); margin-right: 2ch; }

/* --- footnotes ------------------------------------------------------ */

sup a { text-decoration: none; }
.footnotes { color: var(--dim); font-size: 0.9375em; }
.footnotes ol { padding-left: 3ch; }
:target { background: rgba(0, 85, 119, 0.35); }

/* --- footer --------------------------------------------------------- */

footer {
	max-width: var(--col);
	margin: 0 auto;
	padding: 1rem 1.5ch 3rem;
	border-top: 1px solid var(--border);
	color: var(--dim);
	font-size: 0.875rem;
}

/* --- narrow screens ------------------------------------------------- */

@media (max-width: 40em) {
	body { font-size: 14px; }
	main { padding: 1.5rem 1.5ch 3rem; }
	.bar .status { margin-left: 0; width: 100%; }
	table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

@media print {
	:root { --bg: #fff; --fg: #000; --bright: #000; --dim: #555; --border: #999; }
	.bar, footer, h1 { display: none; }
	a { color: #000; }
	a[href^="http"]::after { content: " <" attr(href) ">"; color: #555; }
	pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible;}
	pre, blockquote, table, figure { break-inside: avoid; }
	h1, h2, h3, h4, h5, h6 { break-after: avoid; }
	main { max-width: none; padding: 0rem;}
}