:root {
	--font-size: 24pt;
	--color-annotation: #fff77f;
	--color-pubtime: hotpink;
	--color-body-bg: #14453a; /* aliceblue */
	--color-body-bg-top: #14453a;
	--color-body-bg-bottom: #4b0f44;
	--color-body-fg: #fff016;
	--color-title: tomato;
	--color-concept: #dfffa6;
	--color-link-known-visited: #a9dfff;
	--color-link-known: #3affbe; /* teal */
	--color-link: #1d959b; /* #f3f4f2; */
	--color-meta: #b76e93; /* hotpink; */
	--color-code-fg: #50ff00;
	--color-code-br: #03d0ff;
	--color-purple-haze-text: hotpink;
	--color-purple-haze-1: magenta;
	--color-purple-haze-2: cyan;
	--color-purple-haze-1-x: 0;
	--color-purple-haze-1-y: 0;
	--color-purple-haze-1-r: 0;
	--color-purple-haze-2-x: 0;
	--color-purple-haze-2-y: 0;
	--color-purple-haze-2-r: 0;
	--color-status-1: #596859;
	--color-status-2: #447d83;
	--color-status-3: #7dfb7d;
	--color-1: #5e8fbb;
	--color-2: #cb8aa6;
	--color-3: #ab3e6d;
	--color-4: #14453a;
	--color-5: #189dff;
	--color-6: #a3f8c0;
	--color-7: #c3ff87;
	--color-8: #189dff;
	--color-9: #e1f4ad;
	--color-blue: #ccddee;
	--color-pink: #eecce9;
}
@media (max-width: 800px) {
	:root {
		--font-size: 12pt;
	}
}
@media (max-width: 640px) {
	:root {
		--font-size: 10pt;
	}
}
body {
	min-height: 42em;
	font-family: monospace;
	font-size: var(--font-size);
	line-height: 200%;
	background: linear-gradient(to bottom right, var(--color-body-bg-top), var(--color-body-bg-bottom));
	color: var(--color-body-fg);
	padding: 1.3em;
	padding-right: 5em;
	text-align: justify;
	hyphens: auto;
	overflow-wrap: break-word;
	font-variant-numeric: slashed-zero;
	margin-left: 1em;
}
article {
}
footer {
	margin-top: 1.2em;
	color: lightslategray;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;
}
h3 {
	display: inline;
	line-height: 1rem;
	color: var(--color-title);
}
h3::before {
	content: "";
	display: block;
	margin-top: 1em;
}
/*
// This might only work once I have a contextual parser
// which wraps naked text into paragraphs.
h3 + h3:before {
	content: "+ ";
	color: tomato;
}
*/
a, a:visited {
	color: var(--color-link); text-decoration: none;
	word-break: break-all;
}
article > b {
	color: snow;
	font-weight: normal;
}
i {
	font-style: normal;
	color: hotpink;
}
u {
	text-decoration: none;
	border-bottom: thin solid orchid;
	padding-bottom: .17em;
}
em {
	text-decoration-color: hotpink;
	text-decoration-line: underline;
	text-decoration-style: wavy;
}
code {
	color: var(--color-code-fg);
	border: thin solid var(--color-code-br);
	border-radius: 8px;
	padding: 0 .2em;
	word-break: break-all;
}
.source-wrapper {
	background-color: #333;
	border: thin solid var(--color-code-br);
	border-radius: 8px;
	padding: .5em;
	margin: 1em 0 0 0;
}
pre {
	color: #00ff00;
/*	font-size: 80%;*/
	font-size: 1.4rem;
	line-height: initial;
/*	padding: .5em;*/
	padding: 0 0 .5em 0;
	margin: 0;
	box-sizing: border-box;
	overflow: auto;
	scrollbar-color: black gray;
	scrollbar-width: thin;
}
pre.source {
	color: ghostwhite;
}
pre.error {
	background: darkblue;
	color: crimson;
	font-weight: bold;
}
q {
	color: #b4e0ad;
	font-size: 90%;
	font-family: sans;
}
blockquote {
	background-color: #745a803d;
	color: antiquewhite;

	border-radius: .3em;
	box-shadow: 6px 3px 20px antiquewhite;

	padding: 1em;
	text-align: left;
	word-break: keep-all;
	hyphens: auto;

	font-size: 80%;
	line-height: 150%;
	margin: 1em 0 2em 0;
}
blockquote cite {
	font-style: normal;
	opacity: .8;
}
ruby {
	ruby-align: center;
}
rt {
	border-bottom: thin solid #e8e28e;
	color: #e8e28e;
	font-family: serif;
}
details {
	display: contents;
	color: snow;

}
details summary:before, details summary:after {
	content: "\"";
}
details[open] summary:before {
	content: "";
}
details[open] summary {
	color: chartreuse;
}
details[open] summary:after {
	content: " (";
	color: chartreuse;
}
details[open]:after {
	content: ")";
	color: chartreuse;
}
summary {
	display: inline-block;
	color: var(--color-concept);
	cursor: pointer;
}
.known-uri {
	border-right: thin solid crimson;
	padding-right: .3em;
	color: var(--color-link-known);
	font-weight: bold;
}
.known-uri:visited {
	color: var(--color-link-known-visited);
}
.glow {
	box-shadow: 3px 2px 10px navajowhite;
	border-radius: 15px;
}
.petokraka {
	font-size: 160%;
	color: tomato;
}
.emoji {
	font-size: 160%;
}
.red {
	color: tomato;
}
.upright {
	float: right;
	display: block;
	border-left: thin solid hotpink;
	writing-mode: vertical-lr;
	text-orientation: upright;
	height: max-content;
	margin: 1em 1em 1em 2em;
	padding: 1em;
	color: var(--color-purple-haze-text);
	font-family: mono;
	/* text-shadow: 8px -7px 3px var(--color-purple-haze-1), -7px -7px 3px var(--color-purple-haze-2);
 */
	text-shadow:
		calc(var(--color-purple-haze-1-x) * 1px)
		calc(var(--color-purple-haze-1-y) * 1px)
		calc(var(--color-purple-haze-1-r) * 1px)
		var(--color-purple-haze-1),
		calc(var(--color-purple-haze-2-x) * 1px)
		calc(var(--color-purple-haze-2-y) * 1px)
		calc(var(--color-purple-haze-2-r) * 1px)
		var(--color-purple-haze-2);
}
.columns {
	margin: 2em 0;
	columns: 2;
	column-gap: 2em;

}
.noise { }
#pill {
	color: var(--color-pubtime);
	padding: 0 1em;
	margin: 0 2em 0 0;
	float: left;
}
#meta {
	color: var(--color-meta);
	transform-origin: top left;
	transform: rotate(90deg);
	position: absolute;
	top: 2em;
	left: calc(100svw - 1.5em);
	width: max-content;
}
#copyleft {
	margin-left: auto;
}
#backref {
	margin-left: 1em;
}
#status.version1 {
	position: fixed;
	contain: paint;

	left: .1em;
	top: 0;

	width: calc(100svh - 2em);
	height: var(--font-size);
	line-height: 100%;

	margin: 0;
	padding: 0;

	text-align: right;
	color: var(--color-status-1);

	transform-origin: top left;
	transform: rotate(-90deg) translate(calc(-100svh + 1em));

	overflow-wrap: normal;
	overflow: clip;
	word-break: break-all;
}
#status.version2 {
	position: fixed;
	top: 2em;
	left: -.4em;
	margin: 0;
	padding: 0;
	color: var(--color-status-1);
	writing-mode: vertical-lr;
	text-orientation: upright;
/*		max-width: 2em;*/
/*		overflow: hidden;*/
	min-height: max-content;
}
@media (max-width: 800px) {
	body {
/*			background: hotpink;*/
/*			font-size: calc(1rem + 100vw / 144);*/
/*		font-size: 12pt;*/
		padding: 1em;
		word-break: break-all;
		hyphens: manual;
	}
	a, a:visited {
/*			border-right: thin solid crimson;*/
	}
	blockquote {
		background-color: transparent;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		margin-bottom: 1em;
	}
	footer {
		justify-content: flex-end;
	}
	.columns {
		columns: initial;
		margin: inherit;
	}
	.noise {
		display: none;
	}
}
@media print {
	body {
		color: black;
		background-color: white;
	}
}