body {
	font-family: serif;
	margin: 1em;
	width: 90%;
	font-size-adjust: ex-height 0.5;
	font-size: 1.08em;
}

pre {
	font-size: 1.1em;
	margin-left: 1em;
	overflow-x: auto;
}

@media only screen and (min-width : 900px) {
	body { width: 800px; }
}

p, li {
	text-align: justify;

	/* This is a very new feature but it's perfectly fine if
	 * it's not available. It's just an optional improvement */
	hyphens: auto; 
}

li + li { margin-top: 0.5em; }

h1, h2, h3 { font-weight: normal; }
h1 { font-size: 2.15em; }
h2 { font-size: 1.65em; }
h3 { font-size: 1.35em; }

header { font-size: 2.7em; }
@media only screen and (min-width : 768px) {
	header { font-size: 3em; }
}


header a { text-decoration: none; }
a { text-decoration: underline dotted; }

a:visited { color: darkgoldenrod; }
header a:visited, a:link { color: tomato; }

html { background-color: floralwhite; }

@media (prefers-color-scheme: dark) {
	a:visited { color: peachpuff; }
	header a:visited, a:link { color: lightcoral; }

	html {
		color: white;
		background-color: #111111;
	}
}