.contribute {
	background-image: url('i/contribute.svg');
	background-repeat: no-repeat;
}

.twitter {
	background-image: url('i/twitter.svg');
	background-repeat: no-repeat;
}

.award {
	background-image: url('i/award.svg');
	background-repeat: no-repeat;
}

html {
	max-width: 64rem;
	margin: 0 auto;
	padding: 2rem;
	font-family:
		-apple-systrem,
		BlinkMacSystremFont,
		avenir next,
		avenir,
		segoe ui,
		helvetica neue,
		helvetica,
		Ubuntu,
		roboto,
		noto,
		arial,
		sans-serif;
	line-height: 1.75rem;
	background-color: white;
	color: #272727;
	transition: filter .2s;
}


html.d {
	filter: invert(100%) hue-rotate(180deg);
}

html.d img, html.d .mt {
	filter: invert(100%) hue-rotate(180deg);
}

@media(prefers-color-scheme: dark) {
	html {
		filter: invert(100%) hue-rotate(180deg);
	}

	img {
		filter: invert(100%) hue-rotate(180deg);
	}

	html.enhance.mode body > nav {
		display: block !important;
	}
}

@media(prefers-color-scheme: light) {
	html.enhance.mode body > nav {
		display: block !important;
	}
}

@media (min-width: 68rem) {
	html {
		padding: 0;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

a {
	color: #054ada;
}

a:hover {
	color: #f80;
}

pre, code {
	font-family:
		Menlo,
		Consolas,
		Monaco,
		Liberation Mono,
		Lucida Console,
		monospace;
}

pre {
	overflow-x: auto;
	padding: 1em;
	background-color: #f7f7f7;
}

blockquote {
	font-style: italic;
}

nav {
	padding: 2rem 0;
	text-align: right;
}

nav a.contribute {
	background-size: 18px;
	padding-left: 20px;
}

nav a.twitter {
	background-size: 18px;
	padding-left: 20px;
}

footer {
	margin-top:  2rem;
	text-align: center;
}

@media (min-width: 68rem) {
	footer {
		padding-bottom: 2rem;
	}
}

section#q pre {
	white-space: normal;
	overflow-x: auto;
}

section#q pre code {
	display: block;
	min-width: 25em;
}

@media (min-width: 68rem) {
	section#f ul {
		column-count: 2;
	}
}

section#b ol,
section#t ul,
section#cs ul,
ul.pv {
	padding: 0;
	list-style-type: none;
}

section#b figure {
	margin: 0;
}

section#b figure figcaption a {
	display: block;
	text-align: center;
}

section#b figure img {
	max-inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

section#b ol,
section#t ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr));
	gap: 2rem;
}

blockquote {
	margin: 0;
	padding-left: 4em;
	min-height: 3em;
	margin-bottom: 1em;
}

blockquote header {
	display: flex;
	gap: .5em;
	margin-left: -4em;
	margin-bottom: -2em;
}

blockquote header figure {
	display: flex;
	gap: 1em;
	margin: 0;
}

section#t blockquote {
	margin: 0;
}

section#t figure img {
}

section#cs ul {
	display: flex;
	flex-wrap: wrap;
}

section#cs h2.award {
	padding-left: 28px;
	background-size: 28px;
}

section#htc h2.contribute {
	padding-left: 28px;
	background-size: 28px;
}

section#htc ul {
	padding: 0;
	list-style-type: none;
	overflow-wrap: anywhere;
}

@media (min-width: 68rem) {
	section#htc ul {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 1em;
	align-items: center;
	}
}

section#htc ul li {
	overflow-wrap: anywhere;
	text-align: center;
}

section#htc small {
	display: block;
	min-height: 4rem;
}

.mode body > nav {
	display: grid;
	grid-template-columns: auto auto auto auto 1.25em;
	justify-content: end;
	column-gap: .25em;
}

.pv {
	font-size: smaller;
}

.pv th {
	text-align: left;
}

.pv td {
	vertical-align: top;
}