:root {
	--bg:	#FEF9FF;
	--fg:	#1B1C22;
	--hl:	#c3c2c4;
	--ch:	#5f6ed3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:	#1e1e1e;
		--fg:	#bdbdbd;
		--hl:	#413f42;
		--ch:	#48B8D0;
	}
}

body {
	background-color: var(--bg);
	color: var(--fg);
	width: 90%;
	max-width: 80em;
	margin: auto;
	font-family: monospace;
	font-size: 1.3em;
}

h1 {
	font-size: 2.6em;
	text-align: center;
}

a {
	text-decoration: none;
	color: var(--ch);
}

a:hover {
	color: var(--hl);
}

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

blockquote {
	margin: auto;
	background: var(--hl);
	padding: 0.1em 1em;
	width: 90%;
}

pre {
	padding: 0.5em 1em;
	text-align: left;
	border: solid 2px var(--hl);
	line-break: anywhere;
	white-space: pre-wrap !important;
}

code {
	background: var(--hl);
}

pre code {
	background: none;
}

kbd {
	background-color: var(--hl);
	border-radius: 0.1em;
	border: 1px solid var(--fg);
	padding: 0.1em 0.2em;
	box-shadow: 1px 1px 0 black;
}

footer img {
	display: inline-block;
	height: 1.5em;
}

.pages {
	margin: 0 auto;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

.pages th,td {
	border-bottom: var(--hl) 1px dashed;
	padding: 0em 0.5em;
}

.pages img {
	max-height: 2rem;
	max-width: 2rem;
}

.block {
	width: 100%;
	break-inside: avoid;
}

.columns {
	columns: 2;
	column-gap: 2em;
}
	
.columns h2 {
margin-top: 0;
}

@media only screen and (max-width: 1000px) {
	body {
		width: 90%;
	}
	
	.columns {
		columns: 1;
	}
}