:root {
	--fg: #bac2e7;
	--bg: #1a1b26;
	--sbg: #39405e;
	--link: #7aa2f7;
	--regularfont: system-ui;
	--titlecodefont: 'Courier New', Courier, monospace;
}

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

img {
	max-height: 22em;
	padding-top: 1em;
	display: block;
	margin: auto;
}

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

code {
	font-family: var(--titlecodefont);
	background: var(--sbg);
	border-radius: 3px;
	font-size: 85%;
}

blockquote {
	background: rgba(219, 75, 77, 0.2);
	padding: 0.3em 0.9em;
	margin: auto;
	border-left: 4px solid #db4b4d;
	color: #fff;
}

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

a:hover {
	color: #89ddff;
}

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

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

h1 {
	text-align: center;
}

h1 {
	color: #bb9af7;
}

h2 {
	color: #2ac3de;
}

h3,
h4,
h5,
h6 {
	color: #DDD;
}

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

.columns {
	columns: 1;
}

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

.block {
	break-inside: avoid;
}

ul {
	padding: 0 0 0 1em;
}

li {
	margin: 0 0 0.1em 0;
}

@media print {
	.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;
	}
}