@font-face {
	font-family: 'hyzure';
	font-display: swap;
	src: url('fonts/gabriele-bad-ah.woff2') format('woff2');
}

@font-face {
	font-family: 'baudot';
	font-display: swap;
	src: url('fonts/baudot-5.woff2') format('woff2');
}

@font-face {
	font-family: 'butterflies';
	font-display: swap;
	src: url('fonts/butterflies-by-darian.woff2') format('woff2');
}

@keyframes cursor-dormant {
	0% {
		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJUExURQAAAAD/kAAAAPRHz+gAAAADdFJOU///ANfKDUEAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACsSURBVDhPrY5RDsMwCEOT3P/Qww4wMKr6sTmqiIl5ZR2RNkZgew39n7A1MYnS6RbzwugBzAtDCGbxFYkzOr4iwYHwvIPN7mV/aAwPBJuElkgCd4vcJVEs5vx8HW4QXdy9csvoJwE93KGcKNOcuO7ewnkA3gp67JcdvJr4yk7mTCWAHknxRtW7zZPQes00tkscCLkfJbh7qprDDtyjqMfH/Ajo/AiM9zfi74RzPpXyBxFPYhVYAAAAAElFTkSuQmCC') 16 16, auto;
	}
	
	100% {
		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAhUExURQAAAAD/kAAJAQAfBAD/lAAlBAAgBAAZAwArBQATAgAAAPnK7FkAAAALdFJOU/////////////8ASk8B8gAAAAlwSFlzAAAOwwAADsMBx2+oZAAAANdJREFUOE+dUosSgzAIKz7Yxv9/8BLKeoXu9Lb4oEBItNoso+ZLQSIO/Ey4s2h3E7J4JALblbIQqknOBCmvCSWD/BWBBrbZHqljJmBedjlMzigQE8H1zdA9udKo9qAYZcYO54+Hl4GhIE1w+kpxPHG4kxNOUcZB/ixQbk1UfY55RCckBSSgaVi418YVMWRfB25jJyEcekFgyhdDQKUrdQwFALN4pmYy9RMBu+wKcz8T+kaVUsQOiieDRQHy5Y8pCoZvefUMpGSHhbD895XwZaKgOPyhkAtmb+eeItUo9R3OAAAAAElFTkSuQmCC') 16 16, auto;
	}
}

@keyframes cursor-awakened {
	0% {
		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAJUExURQAAAAD/kAAAAPRHz+gAAAABdFJOUwBA5thmAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+gHFw01LNEcvX8AAAC4SURBVBjTNVAxDsMgDDSIIrJBlIERVXkIkTJkzMqWVmreAVJVMWaK1Af0nzWGePHJnO/OAGB5aHUB8W7ATdQMMA1lFj1znCFQYAxoBCnee15Y/TCONhd2sjZVucXwuv95LthY1ym9FX1YRys3tHv9DhnAQQDGffziWygATuTsW7cH3JKrHW5kJpVbD0+Cj1wtsmEEpsFS1h5TUIwU55mCCVgyOiA3Cs84naM8zHVNtEuNboBfn0G6fxVUHGLRC1uZAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA3LTIzVDExOjA5OjIzKzAwOjAwKLZUVQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNy0yM1QxMToxMzo1NSswMDowMOZSn8MAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjQtMDctMjNUMTM6NTM6NDQrMDA6MDALH3P/AAAAAElFTkSuQmCC') 16 16, auto;
	}
	
	100% {
		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAhUExURQAAAAAAAAD/kAD/lQASAgAJAQAlBAAfBAAgBAArBf///9B1ZhkAAAABdFJOUwBA5thmAAAAAWJLR0QKaND0VgAAAAd0SU1FB+gHFw01LNEcvX8AAADrSURBVCjPXVFbbsMwDKPZpcX+BJ+AMTA0+cvHgP73BDvC0BMMO0KPkBNPysPp7A8nkkhRooH1JDSnTSTyf8IIO6oBl/bLq/CvHEBsPI/NJqHGSTA5/G1atUhaUqezth6BSaLpUA5K6l6GS7Scu+mYBBm6YMAzBB1YfuE9vnFbV/LkPWdgGMo8L/jH7AXassxYUCJL5zjUwzjjOF79r+SPdXjv8ekM5+TnQqOrPeBj9scYPKnvU90E+MIkVjciQf5QdTnyrJObwn19vStcZ0hVC9MlrK5xGMxl3q3Hfr0IJ6h5OpnQZNrn3w39AzHCE+Lnh8e7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA3LTIzVDExOjA5OjIzKzAwOjAwKLZUVQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNy0yM1QxMToxMzo1NSswMDowMOZSn8MAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjQtMDctMjNUMTM6NTM6NDQrMDA6MDALH3P/AAAAAElFTkSuQmCC') 16 16, auto;
	}
}

html {
	height: 100%;
}

[data-theme='dark'] {
	--accent: #0f9;
	--primary: #000;
	--meta-brightness: 0;
}

[data-theme='light'] {
	--accent: #000;
	--primary: #0f9;
	--meta-brightness: 1;
}

body {
	--aura-opacity-factor: 1;
	--body-background: url('img/recontours2x2op.gif');
	font-family: 'hyzure', 'Courier New';
	color: var(--accent);
	background-color: #0f9;
	background-image: linear-gradient(color-mix(in srgb, var(--primary), #0000 5%), color-mix(in srgb, var(--primary), #0000 5%)), var(--body-background);
	image-rendering: pixelated;
	margin: 1vmin;
	height: 100%;
	overflow-x: hidden;
	filter: invert(0);
	transition: all 0.5s;
	animation: cursor-dormant 0.5s linear infinite;
	
	* {
		font-weight: normal;
		text-align: center;
	}
}

@media (width < 500px) or (height < 500px) {
	body {
		--body-background: url('img/recontoursop.gif');
	}
}

@media (width > 2000px) or (height > 2000px) {
	body {
		--body-background: url('r2/img/recontours4x4op.gif');
		background-size: cover;
	}
}

::selection {
	background-color: color-mix(in srgb, var(--accent) 50%, #0000);
	color: var(--primary);
}

.aura {
	background-color: color-mix(in srgb, var(--accent) calc(var(--aura-opacity-factor) * 10%), #0000);
	border: solid 0.3vmin color-mix(in srgb, var(--accent) 50%, #0000);
	padding: 0.7vmin;
}

.spoiler {
	transition: height 0.5s cubic-bezier(0.5, 2, 0.5, 0.5);
	
	* {
		transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
	}
	
	&:not(.spoiled) {
		color: #0000;
		height: 2.5vmin;
		
		* {
			opacity: 0;
			visibility: collapse;
			transition: all 0.5s cubic-bezier(0, 1, 1, 1);
		}
		
		&::before {
			color: var(--accent);
			height: 0;
			content: '...';
			font-size: 1.5vmin;
			transition: all 0.5s;
		}
	}
	
	&.spoiled::before {
		color: var(--accent);
		height: 0;
		opacity: 0;
		content: '...';
		font-size: 1.5vmin;
		transition: opacity 0.5s;
	}
}

main {
	margin: 15vmin 6vmin 0;
}

header {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 1vmin;
	height: 15vmin;
	font-size: 3vmin;
	z-index: 1;
	/* backdrop-filter: invert(0.5); until firefox stops Lying about supporting it */
}

.subheader {
	display: flex;
	flex-direction: row;
	height: 9vmin;
}

h1 {
	font-size: 5vmin;
	margin: 3em 2.5em 0.5em;
	overflow: hidden;
	
	.aura {
		vertical-align: super;
		display: inline-block;
		white-space: normal;
	}
}

h2 {
	display: flex;
	font-size: 3.5vmin;
	align-items: center;
	justify-content: center;
	margin-bottom: 4vmin;
	height: 0;
	
	&::before, &::after {
		font-family: 'baudot';
		height: 0.2vmin;
		content: 'every step you take leads you to this very moment';
		flex: 1;
		margin: 0 0 1em;
		letter-spacing: 0.2vw;
	}
	
	&::after {
		content: 'how should one lead to honor their future selves?';
	}
}

h3 {
	font-size: 3vmin;
}

hr {
	border: solid 0.1vmin var(--accent);
}

a {
	color: var(--accent);
	animation: cursor-awakened 0.5s linear infinite;
	
	&:hover {
		text-shadow: 0 0 0.5em var(--accent);
	}
}

b {
	position: relative;
	bottom: 2vmin;
	font-size: 6vmin;
	width: 19%;
}

div.ider {
	background-color: var(--accent);
	width: 0.2vmin;
	height: 7.5vmin;
	margin: 0 1%;
}

p {
	line-height: 1.5;
	text-align: left;
	white-space: pre-line;
}

div, p, small {
	font-size: 2vmin;
}

sup, sub {
	font-size: 0.5em;
}

.sus {
	display: inline-block;
	
	sup {
		display: block;
		position: relative;
		top: 0.6em;
	}
	
	sub {
		display: block;
		position: relative;
		top: 0.3em;
	}
}

button, input {
	font-family: 'hyzure', 'Courier New';
	color: var(--accent);
	font-size: 3vmin;
	margin: 1.5em 1em;
	transition: all 0.5s;
	animation: cursor-awakened 0.5s linear infinite;
	
	&:hover {
		--aura-opacity-factor: 3;
	}
	
	&:focus-visible {
		outline: solid 0.2vmin;
		outline-offset: 0.2vmin;
	}
}

input {
	font-family: 'butterflies';
	background-color: var(--primary);
	border: double 0.5vmin var(--accent);
}

img[alt] {
	color: #f00;
	
	&::after {
		content: 'visual construct unreachable';
		font-size: 3vmin;
		visibility: visible;
	}
}

.tea {
	width: 14vmin;
	height: 14vmin;
	margin-top: -2.5vmin;
	filter: contrast(5) hue-rotate(40deg);
}

.meta {
	color: #fff;
	background: url('img/recontoursop.gif');
	padding: 0.2vmin;
	filter: invert(var(--meta-brightness)) brightness(5) sepia() saturate(100) hue-rotate(75deg);
}

.theme-toggle {
	float: right;
}

.knowledge-knob {
	float: left;
}

.knowledge {
	position: absolute;
	color: #60f;
	font-size: 2.5vmin;
	margin-top: 1em;
	margin-right: 10em;
	transition: all 0.25s;
}

[data-collapsible] {
	opacity: 0;
	visibility: hidden;
}

.active {
	opacity: 1;
	visibility: visible;
}

[data-context]:not(a, .sus) {
	text-decoration: underline dotted 0.3vmin;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.5vmin;
}

#context { /* see context.js ... for context ... on #context */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	transform: 
		translate(
			calc((var(--x) * 1px)	+	((var(--xFlip) * (100% + 2em)) + 1em)), 
			calc((var(--y) * 1px)	+	((var(--yFlip) * (100% + 2em)) + 1em))
		);
	pointer-events: none;
	transition: opacity 1s ease-in-out;
	background-color: var(--primary);
	padding: 1vmin;
	font-size: 1vmin;
	border: dotted 0.32vmin;
	
	&:not(.active) {
		opacity: 0;
	}
}