:root {
	--main-bg-color: #242424;
	--secondary-bg-color: #282a36;
	--warning-bg-color: #372525;
	--main-color: #e6e6e6;
	--link-color: #57ACDC;
	--link-visit-color: #4690B9;
}

@media (prefers-color-scheme: light) {
	:root {
		--main-bg-color: #fafafa;
		--secondary-bg-color: #f8f8f8;
		--warning-bg-color: #f0dbdb;
		--main-color: #444;
		--link-color: #57ACDC;
		--link-visit-color: #4690B9;
	}
}

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

:visited {
	color: var(--link-visit-color);
}

:link:hover {
	text-decoration: underline;
}

html {
	background: var(--main-bg-color);
	color: var(--main-color);
	font-family: "Valkyrie A";
	font-size: 1.125rem;
}

main {
	max-width: 45rem;
	margin-inline: auto;
	padding-inline: 1em;
}

h1, h2, h3, h4 {
	font-family: "Concourse 4 Caps";
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

pre, code {
	font-family: "Triplicate A Code";
	overflow: scroll;
}

p, ul, ol {
	margin-block: 1rem;
}

hr {
	margin-block: 2ex;
}

.attention, .chroma, blockquote{
	border-top: solid var(--main-color) 0.125ex;
	border-bottom: solid var(--main-color) 0.125ex;
	margin-block: 1ex;
	padding-block: 1ex;
	padding-inline: 1rem;
}

.attention {
	background: var(--warning-bg-color);
}

.publication > p {
	padding-left: 1rem;
	margin-block: 0.25rem;
}

.publication {
	margin-bottom: 1.25rem;
}

blockquote {
	background: var(--secondary-bg-color);
}

img {
	margin: auto;
}