body {
	color: #222;
	background-color: #fefefe;

	max-width: 670px;
	margin: 0 auto;
	border: 0;
	padding: 1rem;

	overflow-wrap: anywhere;
}

header nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

header nav ul li {
	display: inline-block;
	margin: 5px;
	padding: 0 10px;
}

header nav a {
	text-decoration: none;
}

header nav a:hover {
	text-decoration: underline;
}

h1, h2, h3 {
	margin: 2rem 0 1rem;
}

h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 120%; }

nav ul {
	list-style: disclosure-closed;
}

nav ul li {
	margin: .3rem 0;
}

blockquote {
	font-style: italic;
	margin: 1rem;
	margin-left: 1.5rem;
	position: relative;
}

blockquote::before {
	content: "“";
	font-size: 2rem;
	position: absolute;
	top: -0.5rem;
	left: -1rem;
}

blockquote + blockquote::before {
	content: "";
}

p {
	text-align: justify;
	hyphens: auto;
	white-space: pre-wrap;
}

img {
	max-width: 90%;
	height: auto;
}

figure {
	margin: 0;
	padding: 0;
	text-align: center;
}

figcaption {
	padding: 0.5rem;
	font-size: 0.9rem;
}

pre {
	background-color: #f3f3f3;
	margin: 0;
	padding: 1rem;
	border-radius: 3px;
	overflow-x: auto;

	text-align: left;
	text-align: initial;
}

footer {
	margin-top: 2rem;
	text-align: center;
}

footer hr {
	width: 100%;
	height: 1px;
	background-color: #222;
	border: 0;
	margin-bottom: 1rem;
}

footer dl * {
	display: inline;
}


/* dark theme */
@media (prefers-color-scheme: dark) {
	body {
		color: #ffffea;
		background-color: #383838;
	}

	a {
		color: #8e8eff;
	}

	pre {
		background-color: #111;
	}

	footer hr {
		background-color: #ffffea;
	}
}