@font-face {
	font-family: Olympe;
	font-display: swap;
	src: url("/fonts/OlympeMono-Regular.woff2") format("woff2");
}

@font-face {
	font-family: Atkinson;
	font-display: swap;
	src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: Atkinson;
	src: url(/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2);
	font-weight: normal;
	font-style: italic;
}

:root{
	--bg1: #234;
	--bg2: #222;
	--fg: #eee;
	--link: #eda;
	--link-active: #eb5;
	--highlight: #f92;
	--frame: #000;

	color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
	:root {
		--bg1: #def;
		--bg2: #ddd;
		--fg: #223;
		--link: #247;
		--link-active: #768;
		--highlight: #a40;
		--frame: #fff;
	}
}

body {
	background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
	color: var(--fg);
	font: 1.2rem/1.4 Atkinson, sans-serif;
	max-width: 38rem;
	margin: clamp(2rem, 12vh, 8rem) auto 1rem;
	padding: 0 1.8em;
}

h1 {
	font: 2.5em/1 Olympe, monospace;
	color: var(--highlight);
}

a {
	text-decoration-style: dotted;
}
a,
summary {
	color: var(--link);
}
:is(a, summary):hover,
:is(a, summary):focus-visible {
	color: var(--link-active);
	text-decoration: underline;
}
:is(a, summary):focus-visible {
	outline: 1px solid var(--highlight);
	outline-offset: 2px;
}


p {
	margin: 0 0 0.7rem;
}

details {
	position: relative;
}
summary::before {
	content: '+';
	position: absolute;
	left: -.8em; /*fine with monospace*/
}
details[open] summary::before {
	content: '-';
}
summary {
	font: 1.5em/1.6 Olympe, monospace;
	cursor: pointer;
	list-style: none;
}
summary::-webkit-details-marker { /*Safari...*/
	display: none;
}

abbr {
	cursor: help;
}

figure {
	background-color: var(--frame);
	padding: .7rem .7rem .4rem;
	width: min(90vw, 140%);
	margin-left: 50%;
	transform: translateX(-50%); /*hack to center*/
}
figcaption {
	color: var(--fg);
	font-size: 0.9em;
	text-align: right;
	font-style: italic;
}
img {
	width: 100%;
}
ul,
ol {
	margin: -.5rem 0 0; /*hug the introducing <p> a little tighter*/
}
footer {
	font-size: 0.85em;
	opacity: 0.8;
	margin: 3rem 0 0.5rem;
}

.openbsd {
	font-family: serif;
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: #cf4229;
	text-shadow: 1px 1px 1px black;
}
.open {
	color: #f2ca30;
	font-style: italic;
}
.bsd {
	color: #cf4229;
}

*:lang(zh-Hans) {
	font-family: "Hiragino Sans GB", "Microsoft YaHei","WenQuanYi Micro Hei", "Noto Sans SC", sans-serif;
}

header {
	position: relative;
}

#polaroid {
	display: block;
	width: 9.5rem;
	transform: rotate(-5deg);
	margin: 0 auto 1rem;
}
@media (min-width: 64rem) {
  #polaroid {
    position: absolute;
    top: -3rem;
    right: -12rem;
    margin: 0;
  }
}

footer > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3 10em;
	column-gap: 1.5em;
}
footer > ul > li {
	break-inside: avoid;
}