html {
	background-color: #222;
	color: #eee;
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 1em auto;
	padding: 0 2ch;
	max-width: 84ch;
	font-family: monospace;
	font-size: 1.25em;
}

a {
	color: #fbb;
}

code {
	color: #222;
	background-color: #eee;
	padding: 0 1ch;
	font-weight: bold;
	font-style: normal;
	border-radius: 4px;
	display: inline-block;
}

dt {
	font-weight: bold;
	margin: 2ex 0 1ex 0;
}

dt:before {
	content: '> ';
}

dd {
	margin-left: 4ch;
}

strong {
	font-weight: bold;
	color: #f83;
}

em {
	font-style: oblique;
	color: #af3;
}

h1 {
	font-size: 1em;
	margin: 1ex 0;
	text-align: center;
	padding: 1ex 0;
}

h1 span {
	font-size: 0;
}

p {
	margin: 1ex 0;
}

h2 {
	font-size: 1em;
	margin: 3ex 0 1ex 0;
	text-align: center;
	background-image: linear-gradient(90deg, transparent, #313131, transparent);
	padding: 1ex 0;
}

h3 {
	font-size: 1em;
	margin: 3ex 0 1ex 0;
	text-align: left;
	padding: 1ex 0;
	text-decoration: underline;
}

var {
	font-weight: bold;
	font-style: oblique;
	color: #88aaff;
}

code var {
	color: #cc1144;
}

ul {
	margin: 0 0 0 6ch;
	padding: 0;
	list-style: none;
}

ul li:before {
	content: '* ';
	margin-left: -2ch;
}

li {
	margin: 1ex 0;
}

aside {
	border: 1px solid #fff;
	padding: 2ex 1ch 1ex 1ch;
	opacity: .5;
	margin: 4ex 0 2ex 0;
	position: relative;
}

aside:before {
	content: "Editor's notes";
	position: absolute;
	top: -1.5ex;
	left: 1ch;
	background: #222;
	padding: 0 2ch;
}