:root {
	color-scheme: light dark;
	--light: #fff;
	--lesslight: #efefef;
	--dark: #404040;
	--moredark: #000;
	border-top: 5px solid var(--dark);
	line-height: 1.5em;
	font-family: system-ui, sans-serif;
	font-size: 16px;
}

* {
	box-sizing: border-box;
	color: var(--dark);
}

h1 {
	line-height: 1em;
}

button, input {
	font-size: 1em; /* Override browser default font shrinking*/
}

input {
	border: 1px solid var(--dark);
	background-color: var(--lesslight);
	border-radius: .25em;
	padding: .5em;
}

pre {
	background-color: var(--lesslight);
	margin: 0.5em 0 0.5em 0;
	padding: 0.5em;
	overflow: auto;
}

code {
	background-color: var(--lesslight);
}

body {
	background-color: var(--light);
	margin: 0;
	max-width: 800px;
	padding: 0 20px 20px 20px;
	margin-left: auto;
	margin-right: auto;
}

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

button, .button, input[type=submit] {
	display: inline-block;
	background-color: var(--dark);
	color: var(--light);
	text-align: center;
	padding: .5em;
	border-radius: .25em;
	text-decoration: none;
	border: none;
	cursor: pointer;
}

button:hover, .button:hover, input[type=submit]:hover {
	color: var(--lesslight);
	background-color: var(--moredark);
}

/* Add a margin between side-by-side buttons */
button + button, .button + .button, input[type=submit] + input[type=submit] {
	margin-left: 1em;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bordered {
	border: 3px solid;
}

.home {
	display: inline-block;
	background-color: var(--dark);
	color: var(--light);
	margin-top: 20px;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	font-weight: bold;
}


/* Desktop sizes */
@media only screen and (min-width: 600px) {
	ol.twocol {
		column-count: 2;
	}

	.row {
		display: flex;
		flex-direction: row;
		padding: 0;
		width: 100%;
	}

	/* Make everything in a row a column */
	.row > * {
		display: block;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	.row > *:not(:last-child) {
		margin-right: 10px;
	}
}

/* Dark mode overrides (confusingly inverse) */
@media (prefers-color-scheme: dark) {
	:root {
		--light: #222;
		--lesslight: #333;
		--dark: #eee;
		--moredark: #fefefe;
	}
	/* This fixes an odd blue then white shadow on FF in dark mode */
	*:focus {
		outline: var(--light);
		box-shadow: 0 0 0 .25em royalblue;
	}
}

/* Printing */
@media print {
	.home {
		display: none;
	}
}