:root {
	--bg: 35, 35, 140;
	--darkerink: 255, 210, 166;
	--ink: 255, 234, 204;
	--brightink: 255, 244, 229;
	--shade: 58, 58, 166;
	--link: 89, 172, 255;
	--visited: 198, 140, 255;
	--active: 255, 76, 106;
	--hover: 92, 195, 229;
	--code: 69, 229, 109;
	--codebg: 0, 5, 13;
	--highlight: 255, 195, 76;

	--serif: -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--sans: "Casserole-Sans", -apple-system, ui-sans-serif, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mono: "Covik", ui-monospace, SFMono-Regular, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--round: ui-rounded, "Arial Rounded MT Bold", sans-serif;
	--blackletter: "Casserole-Blackletter";
	--flare: "Casserole-Flare";
}

@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Medium_Italic.woff") format("woff");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Semibold_Italic.woff") format("woff");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/fonts/Covik_Sans_Mono-Bold_Italic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Casserole-Blackletter";
	src: url("/fonts/Casserole-Blackletter.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Flare";
	src: url("/fonts/Casserole-Flare.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Sans";
	src: url("/fonts/Casserole-Sans.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}


html {
	background: linear-gradient(180deg, rgba(var(--shade), 1.0), rgba(var(--shade), 0) 96em), rgba(var(--bg), 1);
	background-repeat: repeat-x;
	height: 100%;
	display: table;
	margin: auto;
}

body {
	font-family: var(--mono);
	font-size: 1.25em;
	padding: 2em;
	color: rgba(var(--ink), 1);
	text-shadow: 0 0.125em 0.125em rgba(var(--codebg), 0.125);
	height: 100%;
	max-width: 32em;
	display: table-cell;
	vertical-align: middle;
}

.breadcrumbs {
	font-size: 0.875em;
	margin: 0 0 0.5em 0;
	color: rgba(var(--darkerink), 0.25);
}

.breadcrumbs a, .breadcrumbs a:visited {
	color: rgba(var(--darkerink), .5);
	text-decoration-color: rgba(var(--ink), 0.125);
}

.legal {
	font-size: 0.75em;
	color: rgba(var(--darkerink), 0.5);
}

p {
	line-height: 1.5em;
}

small {
	opacity: 0.75;
	line-height: 1em;
}

.edit {
	opacity: 0.5;
	font-style: italic;
}

.edit::before {
	content: "Edited ";
}

.edit::after {
	content: ":";
}

strong {
	font-weight: 700;
}

img {
	width: 106.25%;
	height: auto;
	left: -3.125%;
	position: relative;
	border-radius: 0.75em;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
	margin: .5em 0;
}

audio {
	width: 106.25%;
	left: -3.125%;
	position: relative;
}

video {
	width: 106.25%;
	height: auto;
	left: -3.125%;
	position: relative;
	border-radius: 0.75em;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
}

::selection, .highlight {
	background: rgba(var(--highlight), 1);
	color: rgba(var(--bg), 1);
}

hr {
	border: 0.0625em solid rgba(var(--ink), 0.125);
	margin: 1.5em 0;
}

h1 {
	font-family: var(--flare);
	color: rgba(var(--ink), 1);
	margin: 0.25em 0;
	font-size: 2.25em;
	line-height: 1.125em;
}

h2 {
	font-family: var(--sans);
	color: rgba(var(--darkerink), 0.75);
	margin: 0.25em 0;
	font-size: 1.75em;
}

h3 {
	font-family: var(--sans);
	color: rgba(var(--darkerink), 0.5);
	margin: 0.25em 0;
	font-size: 1.25em;
}

ul, ol {
	line-height: 1.5em;
}

ul {
	list-style-type: disc;
	padding-left: 1.5em;
	margin: 0.75em 0 1em 0;
}

ul ul {
	list-style-type: square;
	padding-left: 1.4375em;
	margin: 0.25em 0;
	font-size: 0.875em;
	opacity: 0.75;
}

ol {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin: 0.5em 0;
}

ol ol {
	list-style-type: lower-alpha;
	padding-left: 1.4375em;
	margin: 0.25em 0;
	font-size: 0.875em;
	opacity: 0.75;
}

a:visited, a.visited {
	color: rgba(var(--visited), 1);
	text-decoration-color: rgba(var(--visited), 0.25);
}

a:active, a.active {
	color: rgba(var(--active), 1);
	text-decoration-color: rgba(var(--active), 0.25);
}

.active {
	color: rgba(var(--active), 1);
}

a, a.links {
	color: rgba(var(--link), 1);
	text-decoration-color: rgba(var(--link), 0.25);
	text-underline-offset: .125em;
	text-decoration-thickness: .125em;
}

h1 a, h1 a:visited {
	color: rgba(var(--brightink), 1);
	text-decoration-color: rgba(var(--brightink), 0.125);
	text-decoration-thickness: .0625em;
}

h2 a, h2 a:visited {
	color: rgba(var(--ink), .75);
	text-decoration-color: rgba(var(--ink), 0.125);
	text-decoration-thickness: .09375em;
}

h3 a, h3 a:visited {
	color: rgba(var(--ink), 0.625);
	text-decoration-color: rgba(var(--ink), 0.125);
}

a:active:hover {
	color: rgba(var(--active), 1);
	text-decoration-color: rgba(var(--active), 0.5);
}

a:hover, a.hover, h1 a:hover, h2 a:hover, h3 a:hover, .breadcrumbs a:hover {
	color: rgba(var(--hover), 1);
	text-decoration-color: rgba(var(--hover), 0.5);
}

h2 a.anchor, h2 a.anchor:active, h2 a.anchor:visited {
	font-family: var(--blackletter);
	color: rgba(var(--bg), 1);
	background: rgba(var(--highlight), 1);
	padding: .0625em .25em;
	margin-right: .25em;
	border-radius: .125em;
	text-decoration: none;
	text-shadow: none;
}

h2 a.anchor:hover {
	color: rgba(var(--bg), 1);
	background: rgba(var(--ink), 1);
}

blockquote {
	background: rgba(var(--codebg), 0.375);
	color: rgba(var(--highlight), 1);
	padding: 1em 1.5em 1em 1.25em;
	margin: 2em 0;
	border-left: rgba(var(--highlight), 1) 0.25em solid;
}

code {
	color: rgba(var(--code), 1);
	margin: 2em 0;
	font-family: var(--mono);
	font-size: inherit;
	tab-size: 4;
}

pre code {
	display: block;
	white-space: pre-wrap;
	background: rgba(var(--codebg), 0.5);
	padding: 1em 1.5em 1em 1.25em;
	border-left: rgba(var(--code), 1) 0.25em solid;
	text-shadow: 0 0 0.5em rgba(var(--code), 0.5);
}

.spoiler {
	background: rgba(var(--ink), 1);
	text-shadow: none;
}

.spoiler:hover {
	background: rgba(var(--ink), 0.25);
}

blockquote .spoiler {
	background: rgba(var(--highlight), 1);
	text-shadow: none;
}

blockquote .spoiler:hover {
	background: rgba(var(--highlight), 0.25);
}

p:last-of-type::after {
	content: "⬛";
	margin-left: 0.25em;
	color: rgba(var(--active), 1);
	font-weight: 100;
}

footer {
	font-size: 0.875em;
	opacity: 0.75;
	border-top: 0.125em solid rgba(var(--ink), 0.125);
	margin: 2em 0 0 0;
	padding: 2em 0 0 0;
	color: rgba(var(--ink), 1);
}