:root {
	--main-width: 80ch;
	
	--tiny-space: 0.25rem;
	--small-space: 0.75rem;
	--med-space: 1.5rem;
	--big-space: 2.5rem;
	
	--serif: Iowan Old Style, Apple Garamond, Droid Serif, Source Serif Pro, serif;
	--base-hue: 255;
	--dark: hsl(var(--base-hue), 50%, 10%);
	--dim: hsl(var(--base-hue), 20%, 40%);
	--light: hsl(var(--base-hue), 65%, 83%);
	--body-bg: var(--dark);
	--body-col: #000;
	--structure-col: hsl(calc(var(--base-hue) - 30), 70%, 65%);
	--a-col: #50394c;
	--h1-col: #ffffff;
	--h2-col: #ffff99;
	--code-bg: hsl(var(--base-hue), 10%, 25%);
	--h1-shadow: -0.15rem 0.1rem 0.15rem var(--h2-col);
	--blockquote-border: var(--tiny-space) solid var(--structure-col);

}

html {
	background-color: #9f8034;
	color: var(--body-col);
}

/* HEADINGS */
h1 {
	color: #9bc1e3;
	text-decoration: none;
	font-size: 30pt;
}
h2 { color: #527798;
font-size: 16px}

h4 { color: #ffffff;
font-size: 16px}

strong:first-child {
	font-weight: bold;
	font-style: italic;
}


/* ARTICLE LINKS */
a, .alike {
	color: var(--a-col);
	text-decoration-thickness: calc(var(--tiny-space)/3);
	text-decoration-line: underline;
	transition-property: text-decoration-thickness, text-decoration-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}
a:hover, a:focus, a:active, .alike:hover, .alike:focus, .alike:active { text-decoration-thickness: var(--tiny-space); }
h3 a:hover, h3 a:focus {
	text-decoration-thickness: var(--tiny-space);
	text-decoration-color: var(--h1-col);
}
h3 a::after {
	content: '→';
	width: 0;
	display: inline-block;
	overflow-x: clip;
	transition: width 0.25s ease-in-out;
	color: var(--structure-col);
	margin-left: var(--tiny-space);
}
h3 a:hover::after, h3 a:focus::after { width: 1em; }

/* FOOTNOTES + ASIDES */
main { counter-reset: footnotes sidenotes; }
a.footnote {
	counter-increment: footnotes;
	text-decoration: none;
	color: inherit;
	cursor: default;
}
a.footnote::after {
	content: '[' counter(footnotes) ']';
	vertical-align: super;
	font-size: 0.75em;
	color: var(--structure-col);
}
footer.footnotes { border-top: 1px solid var(--structure-col); }
footer.footnotes :target { color: var(--h2-col); }
a.footnote:hover { cursor: pointer; }
aside {
	line-height: 1;
	margin-left: 15%;
	color: var(--dim);
}
aside, aside:before {
	transition-property: color, border-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}
aside:hover, aside:focus, aside:hover:before , aside:focus:before {
	z-index: 1;
	color: var(--body-col);
	border-color: var(--structure-col);
}
@media (width > 150ch) {
	p:has(+ aside:hover):after, p:has(+ aside:focus):after, aside:hover:before, aside:focus:before { color: var(--structure-col); }
	p:has(+ aside) { counter-increment: sidenotes; }
	p:has(+ aside):after {
		color: var(--dim);
		content: '{' counter(sidenotes) '}';
		transition: color 0.5s ease-in-out;
	}
	aside:before {
		content: counter(sidenotes);
		font-size: 0.85rem;
		position: absolute;
		top: var(--tiny-space);
		left: var(--tiny-space);
	}
	aside {
		background-color: var(--body-bg);
		border: var(--tiny-space) double var(--dim);
		padding: var(--small-space);
		position: absolute;
		box-sizing: border-box;
		width: calc(0.5*(100% - var(--main-width)) - var(--med-space));
		max-width: calc(0.65*var(--main-width));
		margin: 0;
	}
	aside:nth-of-type(2n+1) {
		transform: translate(calc(var(--main-width) + var(--small-space)), calc(-1*var(--big-space)));
	}
	aside:nth-of-type(2n) {
		transform: translate(calc(-100% - var(--small-space)), calc(-1*var(--big-space)));
	}
}

/* OTHER */
::selection { background-color: var(--h2-col); }
nav a:last-of-type { text-decoration: none; }
footer#page_footer a {
	font-size: 0.85rem;
	text-decoration: none;
}


 .tab { margin-left: 40px; }

nav a, footer#page_footer a, ::marker, details > summary::-webkit-details-marker, .emailme a { color: var(--structure-col); }
blockquote { border-left: var(--blockquote-border); }
a[href^="http"]::after, code, pre, .status {
	font-family: monospace;
	font-size: 0.9rem;
}
code, pre, img, .swatch, .status { border-radius: var(--tiny-space); }
.swatch {
	height: var(--big-space);
	width: var(--big-space);
	display: inline-block;
}
.math {
	font-family: var(--serif);
	font-style: italic;
}
.proof { border: 2px solid var(--structure-col); }

/* STATUS */
.status {
	background-color: hsl(220, 100%, 15%);
	color: #e6e6e6;
	padding: var(--small-space);
	width: 85%;
}
.status figcaption { font-size: 0.75rem; }
.status .cursor {
	background-color: var(--h1-col);
	animation: 1.1s infinite alternate blink;
	animation-timing-function: linear;
}
a.blockclick { text-decoration: none; }
@keyframes blink {
	0% { filter: opacity(1) }
	30% { filter: opacity(1)}
	60% { filter: opacity(0)}
	100% { filter: opacity(0) }
}

/* LIGHT THEME */
@media (prefers-color-scheme: light) {
	:root{
		--dark: hsl(var(--base-hue), 50%, 35%);
		--dim: hsl(var(--base-hue), 35%, 65%);
		--body-col: var(--dark);
		--body-bg: var(--light);
	}
	ul {
		list-style-type: disc;
	}
}
/*LAYOUT STUFF -------------------------------------------------------------*/
feed, html {
	scroll-behavior: smooth;
	font-family: sans-serif; 
	font-size: max(1em, 14pt);
	line-height: 1.5;
}
feed, body, .status { box-sizing: border-box; }
feed, body {
	max-width: var(--main-width);
	margin: 0 auto;
}
footer#page_footer { text-align: center; }
footer#page_footer a:first-of-type { display: block }

details > summary { cursor: pointer; }

.clear { clear: both; }
figcaption, .emailme { text-align: right; }
.centered { text-align: center; }
img { max-width: 100%; }
h3 { display: inline-block; }

/*SPACING ----------------------------------------------------------------*/

feed, body {
	padding: 0 8px;
	padding-bottom: var(--med-space);
}
footer#page_footer { padding-top: var(--big-space); }
footer#page_footer, footer.footnotes { margin-top: var(--big-space); }
main { margin-bottom: var(--big-space); }
nav a, footer#page_footer a { margin-right: var(--tiny-space); }
nav a:last-of-type { float: right; }

figure { margin: var(--small-space) var(--med-space); }
blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--small-space);
}
pre, code { padding: var(--tiny-space) var(--small-space); }
pre code { padding: 0; }
h3, .status p { margin: 0; }
h3 + p { margin-top: 0; }
.lazy h3 + p { margin-bottom: 0; }
.status { margin: var(--big-space) auto; }
.essaystub {
	margin: var(--big-space) auto;
	padding: var(--small-space) var(--med-space);
}
.proof { padding: var(--small-space) var(--med-space); }
.proof > :last-child { margin-bottom: 0; }
.math p { margin: 0; }
/*PRISM ---------------------------------------------------*/

/* PrismJS 1.28.0
https: //prismjs.com/download.html#themes=prism-tomorrow&languages=julia&plugins=highlight-keywords */
code, pre[class*=language-] {
	color: var(--light);
	background: 0 0;
	text-align: left;
	white-space:pre-wrap;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none
}
pre[class*=language-] { overflow: auto }
:not(pre)>code, pre[class*=language-] {
	background: hsl(calc(var(--base-hue) - 20), 40%, 20%);
}
.token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
	color: #999
}
.token.attr-name, .token.deleted, .token.namespace, .token.tag {
	color: #e2777a
}
.token.function-name {
	color: #6196cc
}
.token.class-name, .token.constant, .token.property, .token.symbol {
	color: #f8c555
}
.token.inserted { color: hsl(calc(var(--base-hue) - 90), 75%, 50%); }
.token.boolean, .token.function, .token.number { color: var(--h1-col) }
.token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector { color: var(--h1-col) }
.token.attr-value, .token.char, .token.regex, .token.string, .token.variable { color: var(--h2-col); }
.token.entity, .token.operator, .token.url { color: var(--a-col) }
.token.punctuation { color: var(--a-col) }
.token.bold, .token.important { font-weight: 700; }
.token.italic { font-style: italic }
.token.entity { cursor: help }