:root {
	--background-color:  hsl(0, 0%, 100%);
	--callout-color:     hsl(0, 0%, 90%);

	--foreground-color:  hsl(0, 0%, 0%);
	--link-color:        hsl(0, 0%, 50%);
	--link-hover-color:  hsl(205, 69%, 50%);
}
@media (prefers-color-scheme: dark) {
	:root {
		--background-color:  hsl(0, 0%, 12%);
		--callout-color:     hsl(0, 0%, 24%);

		--foreground-color:  hsl(0, 0%, 82%);
		--link-color:        hsl(0, 0%, 65%);
		--link-hover-color:  hsl(259, 49%, 65%);
	}
}

blockquote {
	border-left: 1px solid var(--foreground-color);
	padding-left: 1em;
	margin-left: 1em;
}

body {
	text-align:   left;
	font-size:    14pt;
	font-family:  sans-serif;
	font-weight:  lighter;
	min-width:    12em;
	padding:      0.5em;

	background:  var(--background-color);
	color:       var(--foreground-color);
}
pre, table {
	font-weight: lighter;
	font-size:   0.8em;

	background:    var(--callout-color);
	border-radius: 5px;
	border:        solid 3px var(--callout-color);

	overflow-x:  scroll;
}
details {
	background:    var(--callout-color);
	border-radius: 5px;
	border:        solid 3px var(--callout-color);
}

@media screen and ( min-width: 40em ) {
	body {
		margin:     0 auto;
		padding:    10% 0;
		max-width:  30em;
	}
}

h1, h2, h3 {
	text-transform:  uppercase;
	font-weight:     lighter;
}

h1 {
	font-size:      1.2em;
	margin-bottom:  0.5em;
}
h2 {
	font-size:      1em;
	margin-bottom:  0.5em;
}
h3 {
	font-size:      0.9em;
	margin-bottom:  0.2em
}

header h1 {
	margin-bottom:  0.2em;
}
header p {
	font-size:      0.9em;
	margin-top:     0;
	margin-bottom:  0.2em;
}

p, li {
	line-height:  1.4;
}

ul {
	list-style-type:  circle;
}

a, a:visited {
	color:            var(--link-color);
}
a:hover {
	color:            var(--link-hover-color);
}

nav ul {
	list-style:    none;
	padding-left:  0;
}
nav a, a:visited {
	text-decoration:  none;
}

span.non-breaking {
	white-space:  nowrap;
}

svg {
	max-width: 100%;
}
svg circle, ellipse, polygon {
	stroke: var(--foreground-color);
	fill:   var(--background-color);
}
svg path, polyline {
	stroke: var(--foreground-color);
	fill:   none;
}
svg text {
	fill:   var(--foreground-color);
}