html {
	--transitiontime: 0.2s cubic-bezier(0.5, 0, 0.5, 1);

	--bg:    #eeeeee;
	--bgdim: #e4e4e4;
	--fg:    #1b1b1b;
	--fgdim: #acacac;

	--fgfilter:    brightness(0) invert(0) contrast(0.79);
	--fgdimfilter: brightness(0) invert(1) contrast(0.35);
}

@media (prefers-color-scheme: dark) {
	html {
		--bg:    #111111;
		--bgdim: #1b1b1b;
		--fg:    #e4e4e4;
		--fgdim: #535353;

		--fgfilter:    brightness(0) invert(1) contrast(0.79);
		--fgdimfilter: brightness(0) invert(0) contrast(0.35);
	}
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	padding: 0 24%;
}

@media (orientation: portrait) {
	body {
		padding: 0 2rem;
	}
}

header {
	align-items: center;
	border-bottom: solid 1px;
	display: flex;
	flex-direction: row;
	font-size: 1.5em;
	justify-content: space-between;
}

footer {
	border-top: solid 1px;
	font-size: 0.9em;
	text-align: center;
	width: 100%;
}

header,
footer {
	color: var(--fgdim);
	font-family: serif;
	margin: 1em 0;
	padding: 1em 0;
}

header > a {
	flex-grow: 1;
	text-align: left;
}

header > a img {
	filter: var(--fgdimfilter);
	height: 100%;
	height: 3em;
	transition: filter var(--transitiontime);
}

header > a:hover img {
	filter: var(--fgfilter);
}

header > nav {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

header > nav a {
	color: inherit;
	text-align: right;
	text-decoration: none;
	transition: color var(--transitiontime);
}

header > nav a:hover {
	color: var(--fg);
}

a:not(header a) {
	color: inherit;
	text-decoration: underline;
	transition: opacity var(--transitiontime);
}

a:not(header a):hover {
	opacity: 0.7;
}

a[rel="footnote"],
a[rel="footnote"]:hover,
a[rev="footnote"],
a[rev="footnote"]:hover {
	text-decoration: none;
}

.footnotes {
	color: var(--fgdim);
	transition: color var(--transitiontime);
}

.footnotes:hover {
	color: inherit;
}

#discuss {
	color: var(--fgdim);
	display: inline-block;
	font-family: serif;
	font-size: 1.5em;
	text-align: right;
	text-decoration: none;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: center;
}

p,
ul,
ol {
	margin: 0.5em 0;
}

ul,
ol {
	margin-left: 1.5em;
}

img {
	border-radius: 0.1em;
	max-width: 100%;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img,
p img {
	border-radius: 0;
	max-height: 0.7em;
	max-width: 0.7em;
}

img[src$=".svg"]:not(header img) {
	filter: var(--fgfilter);
}

hr {
	border: none;
	border-bottom: solid 1px;
	color: var(--fgdim);
	margin: 2em 30%;
}

blockquote {
	border-left: solid 1px;
	color: var(--fgdim);
	font-style: italic;
	margin-left: 0.5em;
	padding: 0.5em 1em;
	transition: color var(--transitiontime);
}

blockquote:hover {
	color: var(--fg);
}

em,
figcaption {
	font-style: italic;
}

figcaption {
	font-size: 0.9em;
}

strong {
	font-weight: bold;
}

code,
pre,
table {
	background-color: var(--bgdim);
	border-radius: 0.3em;
	padding: 0.2em;
}

pre {
	color: var(--fgdim);
	overflow: auto;
	padding: 1em;
	transition: color var(--transitiontime);
	white-space: pre;
}

pre:hover {
	color: var(--fg);
}

pre code {
	background: none;
}

table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

th,
td {
	overflow: hidden;
	padding: 0.5em;
	text-align: center;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

sup {
	font-size: smaller;
}