:root {
	--bg: #e1e2e7;
	--sbg: #e9e663;
	--fg: #32344a;
	--title: #7aa2f7;
	--subtitle: #449dab;
	--subsubtitle: #000;
	--link: #9b4ae0;
	--regularfont: system-ui;
	--titlecodefont: 'Courier New', Courier, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #a9b1d6;
		--bg: #1a1b26;
		--sbg: #39405e;
		--title: #ad8ee6;
		--link: #7aa2f7;
		--subtitle: #0db9d7;
		--subsubtitle: #ccf;
	}
}

body {
	width: 90%;
	max-width: 45em;
	margin: 1.5em auto;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--regularfont);
}

pre {
	padding: 1em 1em;
	line-break: auto;
	text-align: left;
	border: solid 1px var(--fg);
}

code {
	font-family: var(--titlecodefont);
	background: var(--sbg);
}

blockquote {
	background: var(--sbg);
	padding: 0.3em 0.5em;
	margin: auto;
}

.buttons {
	text-align: center;
}

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

h1 {
	text-align: center;
}

h3 {
	color: var(--subsubtitle);
}

.finaline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.notfound>h1 {
	font-size: 15em;
}

.notfound {
	text-align: center;
}

.highlight {
	font-family: var(--titlecodefont);
}

h1,
h2,
h3,
pre {
	font-family: var(--titlecodefont);
}

h1 {
	font-size: 2.3em;
	margin: 0.32em 0em 0em 0em;
	color: var(--title);
}

h2 {
	color: var(--subtitle);
}

hr {
	color: var(--fg);
}

.columns {
	columns: 2;
}

.columns ul {
	margin-top: 0em;
}

.block {
	break-inside: avoid;
}

ul {
	padding: 0 0 0 1em;
}

li {
	margin: 0 0 0.1em 0;
}

footer {
	text-align: center;
}

footer img {
	margin: auto;
	display: inline-block;
}

img {
	display: block;
	margin: auto;
	max-height: 25em;
	width: auto;
	max-width: 100%;
}

@media print {

	.no-print,
	.no-print *,
	footer {
		display: none !important;
	}

	.address {
		overflow: visible;
		white-space: wrap;
		word-break: break-all;
	}
}

@media only screen and (max-width: 768px) {
	body {
		width: 90%;
		font-size: 1.1em;
	}

	.columns {
		columns: 1;
	}
}