html, body	{ height: 100%; margin: 0; }
body		{ display: flex; align-items: center; justify-content: center; background-color: #F4F4FA; }
main		{ padding: 0 2em; border-left: 2.5em solid #889; background-color: white; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

h1, dl		{ font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
h1			{ font-weight: normal; font-size: 3em; color: #555; margin: 0.5em 0; line-height: 1; }
h1 a		{ color: inherit; text-decoration: inherit; }
a span		{ color: #DDD; }
h1 a:hover, h1 a:active,
a:hover span, a:active span { text-decoration: underline; color: blue; }

section		{ column-count: 3; column-gap: 2em; margin-left: 0.2em; }
dt			{ font-size: x-large; letter-spacing: 0.05em; margin-bottom: 0.5ex; border-bottom: thin solid #CCC; }
dd			{ border-left: thin solid #CCC; padding-left: 0.7em; margin-left: 1em; line-height: 1.6; font-family: Georgia, serif; }
dl			{ page-break-inside: avoid; break-inside: avoid; margin: 0; margin-bottom: 1em; }

p			{ margin: 1em 0; letter-spacing: 0.1em; }

@media all and (max-width: 40em) {
	section	{ column-count: 1; }
	html, body { height: inherit; }
	body	{ background-color: white; }
	main	{ border: none; padding: inherit; box-shadow: none; }
	h1		{ font-size: 2em; }
	p		{ letter-spacing: initial; }
}