/* CSS Variables */
:root {
	--fainter: #f9f9f9;
	--faint: #eee;
	--medium: grey;
	--heavy: #555;
	--heavier: #333;
	--background: #fff;
	--color: #000;
	--link: #00E;
	--visited: #551A8B;
	--pad: clamp(.5em, 2vw, 1em);
	--v-pad: clamp(.3em, 1vmin, .5em);
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
	:root {
		--fainter: #111;
		--faint: #222;
		--medium: grey;
		--heavy: #aaa;
		--heavier: #ccc;
		--background: #000;
		--color: snow;
		--link: #0cd;
		--visited: #c5c;
	}
	img:not([src*=".svg"]) {
		filter: brightness(90%);
	}
}

:link { color: var(--link); }
:visited { color: var(--visited); }

body {
	background-color: var(--background);
	color: var(--color);
	font-family: Liberation Sans,Arial,Roboto,Helvetica,FreeSans,sans-serif;
	line-height: 1.35;
	margin: auto;
	max-width: 45em;
	overflow-x: hidden; /* show page-width images w/o scrollbar */
}

/* Only underline URLs in p tags (mouseover reveals underline) */
*:not(p) > a:not(:hover) {
	text-decoration: none;
}

/* Make heading and menu links look like buttons */
.menu a,
header a {
	background: var(--faint);
	border-radius: .4rem;
	display: inline-flex;
	margin: .1rem 0;
	padding: .2rem .4rem;
}

a:focus, a:active {
	background: var(--fainter);
}

.menu,
header,
h1,h2,h3,h4,
footer {
	text-align: center;
}

.menu ul,
h1,h2,h3,h4 {
	font-family: Inter,Open Sans,-apple-system,Fira Sans,Ubuntu,IBM Plex Sans,system-ui,Helvetica Neue,sans-serif;
}

.menu ul {
	padding: 0;
}

.menu li {
	display: inline-flex;
	margin: .2rem;
}

hr {
	border: none;
	border-top: .2em double;
	color: var(--medium);
	height: 0;
	overflow: visible; /* Chrome: show hr content */
}

/* decorative text in hr at top & bottom of page */
.menu hr::after,
footer hr::after {
	background: var(--background);
	content: '🏗️';
	padding: 0 .2em;
	position: relative;
	top: -.8em;
}

/* footnotes contain p tags and don't need padding */
h1,h2,h3,h4,
*:not(li) > p,
table {
	padding: 0 1rem;
	padding: 0 var(--pad);
}

p {
	-webkit-hyphens: auto;
	hyphens: auto;
}

pre {
	overflow: auto;
}

/* using line numbers puts code in a table, which has its own padding */
*:not(td) > pre {
	padding: 1vmin 1em;
	padding: var(--v-pad) var(--pad);
}

/* fix font size of inline code */
*:not(td):not(pre) > code {
	font-family: ui-monospace,monospace,monospace;
}

*:not(td, pre, a) > code {
	background: var(--faint);
	padding: 1px .1rem;
}

img {
	height: auto;
	max-width: 100vw; /* WebKit: don't let images get wider than viewport */
	width: 100%;
}

/* keep vertical padding */
p img {
	padding: 1vmin 0;
	padding: var(--v-pad) 0;
}

/* correct for p padding */
p .imgbody {
	margin: 0 -1em;
	margin: 0 calc(-1 * var(--pad));
	width: inherit;
	max-width: 45em;
}

/* Pale Moon supports CSS vars but not clamp */
@supports (margin: var(--pad)) and (not (padding: clamp(.5em, 2vw, 1em))) {
	p img {
		padding: 1vmin 0;
	}
	p .imgbody {
		margin: 0 -1em;
		padding: 1vmin 0;
	}
	*:not(td) > pre {
		padding: 1vmin 1em;
	}
	*:not(li) > p,
	table {
		padding: 0 1em;
	}
}