html, body {
	margin: 0;
	padding: 0;
	font-size: .92em;
	height: 100%;
	width: 100%;
}


* {
	/* Ensure things size normally. */
	box-sizing: border-box;
}

*::selection {
	background-color: #FF2040;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}


body > div.content {
	display: inline-block;

	/* Center-ish. */
	margin: 10%;
}

body > div.content {
	font-size: 0.95em;
}

body > div.content code {
	font-size: 1.1em;
}

body > div.content h1,
body > div.content h2,
body > div.content h3,
body > div.content h4,
body > div.content h5,
body > div.content h6 {
	margin: 24px 0 4px 0;
}


footer {
	position: fixed;
	bottom: 0;
	right: 0;

	padding: 4px 8px;

	font-size: 0.666em;
}


.magic-title {
	display: table;
	font-size: 2.65em;
	cursor: default;
}

.magic-title > .peekaboo {
	display: inline-block;
	width: 0px;
	overflow-x: hidden;
	transition: .15s;
	vertical-align: bottom;
}

.magic-title:hover > .peekaboo {
	width: 1ch;
}




ol, ul {
	margin: 0;
	padding: 0 0 0 24px;
}

ol.spaced > li:not(:first-of-type), ul.spaced > li:not(:first-of-type) {
	margin: 12px 0 0 0;
}


a {
	transition: 0.125s;
}

a:visited {
	color: inherit;
}

a:hover {
	opacity: 0.8;
}




code.easy-select {
	user-select: all;
}

code.easy-select::after {
	content: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%207H7V5h6v2ZM13%2011H7V9h6v2ZM7%2015h6v-2H7v2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2019V1h14v4h4v18H7v-4H3Zm12-2V3H5v14h10Zm2-10v12H9v2h10V7h-2Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
	width: 8px; height: 8px;
	display: inline-block;
	filter: invert(85%);
	position: relative;
	top: -4px;
	opacity: 0.7;
	transition: 0.125s;
}

code.easy-select:hover::after {
	opacity: 0.95;
}




@media (orientation: landscape) {

	body > div.content {
		margin-left: 50%;
		transform: translateX(-50%);
	}

}