@font-face{
	font-family: "Remote Libertinus Sans";
	src: local("Libertinus Sans"), local("xLinux Biolinum"), url("/static/fonts/LibertinusSans-Regular.woff2") format(woff2);
}
@font-face{
	font-family: "Remote Libertinus Sans";
	font-weight: bold;
	src: local("Libertinus Sans Bold"), local("xLinux Biolinum Bold"), url("/static/fonts/LibertinusSans-Bold.woff2") format(woff2);
}
@font-face{
	font-family: "Remote Libertinus Sans";
	font-style: italic;
	src: local("Remote Libertinus Sans Italic"), local("xLinux Biolinum Italic"), url("/static/fonts/LibertinusSans-Italic.woff2") format(woff2);
}
@font-face{
	font-family: "Remote Libertinus Math";
	src: local("Libertinus Math"), url("/static/fonts/LibertinusMath-Regular.woff2") format(woff2);
}


@media (prefers-reduced-motion: reduce) {
	:root:not(:has(#Main-Animation-Selector [value="enable"]:checked)) {
		* {
			animation: none !important;
			transition: none !important;
		}
	}
}
:root:has(#Main-Animation-Selector [value="disable"]:checked) {
	* {
		animation: none !important;
		transition: none !important;
	}
}
:root {
	--hcl-hue: 314.159;
	--hue-2: 135;
	--hue-3: 40;
	--corner-radius: 0.3em;
	--border-width: 0.125rem;
	--inner-corner-radius: calc(var(--corner-radius) - var(--border-width));

	--trans-white: #ffffff;
	--trans-blue:  #5BCEFA;
	--trans-pink:  #F5A9B8;
	--body-padding: 1rem;
	--mono-fonts: "Julia Mono", monospace;
	--main-fonts: "Remote Libertinus Sans", sans-serif;
	--math-fonts: "Remote Libertinus Math", "Remote Libertinus Sans", sans-serif;
	--max-width: 50rem;
	
	font-size-adjust: ex-height from-font;
}

@media (prefers-reduced-data: reduce) {
	:root {
		--main-fonts: "Libertinus Sans", sans-serif;
		--math-fonts: "Libertinus Math", "Libertinus Sans", sans-serif;
	}
}

:root:not(.active-presentation) {
	* {
		/*transition: color 0.2s ease,
			background-color 0.2s ease;
			max-width 0.5s ease,
			font-size 0.5s ease;*/
	}
}

@media print {
	:root {
		--body-padding: 0;
		--max-width: 40rem;
		print-color-adjust: exact;
		font-size: 10pt;
		font-size-adjust: ex-height from-font;
	}
	figure, footer{
		break-inside: avoid;
	}
	pre, blockquote {
		box-decoration-break: slice;
	}
	p {
		orphans: 2;
		widows: 2;
	}
	@page {
		max-width: var(--max-width);
		margin-left: auto;
		margin-right: auto;
		@top-left, @top-right, @bottom-left, @bottom-right{
			content: none;
		}
	}
}

/******************************************** COLOR SCHEMES ********************************/
	:root:not(:has(#Color-Scheme-Selector [value="dark"]:checked)) {
		color-scheme: light;
		--light-mode: 1.0;
	}
@media (prefers-color-scheme: dark) {
	:root:not(:has(#Color-Scheme-Selector [value="light"]:checked)) {
		color-scheme: dark;
		--light-mode: 0.0;
	}
}
@media only screen {
	:root:has(#Color-Scheme-Selector [value="dark"]:checked) {
		color-scheme: dark;
		--light-mode: 0.0;
	}
}

:root {
	--main-col:          light-dark(black,                             oklch(0.90  0.10  var(--hcl-hue)));
	--inv-main-col:      light-dark(white,                             black);
	--link-col:          light-dark(oklch(0.35  0.10  var(--hcl-hue)), oklch(0.80  0.10  var(--hcl-hue)));
	--inv-col:           light-dark(oklch(0.90  0.10  var(--hcl-hue)), oklch(0.25  0.15  var(--hcl-hue)));
	--inv-col-2:         light-dark(oklch(0.85  0.15  var(--hcl-hue)), oklch(0.40  0.15  var(--hcl-hue)));
	--accent-col:        light-dark(oklch(0.35  0.20  var(--hcl-hue)), white);
	--accent-col-2:      light-dark(oklch(0.65  0.20  var(--hcl-hue)), oklch(0.30  0.20  var(--hcl-hue)));
	--accent-bg-col:     light-dark(oklch(0.35  0.20  var(--hcl-hue)), oklch(0.75  0.20  var(--hcl-hue)));
	--accent-inv-col:    light-dark(oklch(0.85  0.20  var(--hcl-hue)), oklch(0.35  0.20  var(--hcl-hue)));
	--accent-inv-col-2:  light-dark(oklch(0.80  0.20  var(--hcl-hue)), oklch(0.30  0.20  var(--hcl-hue)));
	--accent-link-col:   light-dark(white,                             black);
	--good-col:          light-dark(oklch(from green  0.35 c h),       oklch(from green  0.8 c h));
	--bad-col:           light-dark(oklch(from orange 0.35 c h),       oklch(from orange 0.8 c h));
	--neutral-col:       light-dark(oklch(from blue   0.35 c h),       oklch(from blue   0.8 c h));

	--table-bg-lightness-1: calc(var(--light-mode) * 70 + (1 - var(--light-mode)) * 15);
	--table-bg-lightness-2: calc(var(--light-mode) * 80 + (1 - var(--light-mode)) * 25);
	code, pre, .codeblock {
		--red:  light-dark(oklch(0.30 0.1 10),  oklch(0.80 0.2  10));
		--blue: light-dark(oklch(0.30 0.1 210), oklch(0.80 0.2 210));
		--luma:   calc(var(--light-mode) * 0.35 + (1 - var(--light-mode)) * 0.80);
		--chroma: calc(var(--light-mode) * 0.4  + (1 - var(--light-mode)) * 0.2);
	}
}

@media only screen {
	:root{
		background-color: light-dark(var(--accent-col), var(--accent-inv-col));
	}
	
	div.fade-out{
		display: block;
		width: 100%;
		height: 14em;
		background: linear-gradient(transparent 20%, light-dark(var(--accent-col), var(--accent-inv-col)) 90%);

	}
}

@media only print {
	:root {
		color-scheme: light;

		--inv-col:          white;
		--inv-col-2:        oklch(0.95 0 0);
		--accent-bg-col:    black;
		
		--accent-inv-col:   var(--inv-col);
		--accent-inv-col-2: var(--inv-col-2);
		--link-col:         var(--main-col);
		--accent-link-col:  var(--accent-col);

		--good-col: darkgreen;
		--bad-col: darkred;
		--neutral-col: darkblue;

		--table-bg-lightness-1: 80;
		--table-bg-lightness-2: 100;

		code, pre, .codeblock {
			--luma: 0.35;
			--chroma: 0.4;
		}
	}
}


/************************************ Custom Font Size **************************/

:root:has(#Font-Size-Selector [value="large"]:checked) {
	font-size: 125%;
}
:root:has(#Font-Size-Selector [value="larger"]:checked) {
	font-size: 150%;
}
:root:has(#Font-Size-Selector [value="largest"]:checked) {
	font-size: 200%;
}

:root:has(#Max-Width-Selector [value="max"]:checked) {
	--max-width: 100%;
}
:root:has(#Max-Width-Selector [value="wide"]:checked) {
	--max-width: 70rem;
}
:root:has(#Max-Width-Selector [value="wider"]:checked) {
	--max-width: 90rem;
}
:root:has(#Max-Width-Selector [value="narrow"]:checked) {
	--max-width: 30rem;
}

/************************************ END USER SETTINGS **************************/

@media only screen {
	a.footnoteRef {
		color: var(--link-col);
	}
}
::selection {
	color: var(--inv-main-col);
	background: var(--accent-col);
}

body {
	font-family: var(--main-fonts);
	line-height: 1.6em;
	color: var(--main-col);
	background-color: var(--inv-col);
	background: linear-gradient(90deg,
		oklch(from var(--inv-col) l c h / 50%) 0%,
		var(--inv-col) calc(calc(100% - var(--max-width)) / 2 - 3em),
		var(--inv-col) calc(calc(100% - var(--max-width)) / 2 + 3em + var(--max-width)),
		oklch(from var(--inv-col) l c h / 50%) 100%);
	accent-color: var(--accent-color);
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	text-wrap: pretty;
	hyphens: auto;
	scroll-behavior: smooth;
	header, main, footer {
		padding-left: var(--body-padding);
		padding-right: var(--body-padding);
	}
}

#presentation-header-animation-fallback {
	display: none;
}
a.skiplink {
	color: var(--inv-col);
	background-color: var(--accent-bg-col);
	opacity: 0;
	text-decoration: none;
	margin: 0;
	width: 0;
	height: 1.6em;
	padding: 0;
	overflow: hidden;
	&:focus{
		width: auto;
		opacity: 1;
		padding: 0.5em;
	}
}

/************ BLOCKS ************************/

header {
	text-align: center;
	margin-bottom: 2em;
	div.license-and-time {
		padding: 1rem;
		a[rel="license"] {
			text-decoration: none;
		}
		a[rel="license"]:hover {
			text-decoration: underline;
		}
	}
	address {
		padding: 1rem;
		font-size: 1.3em;
		color: var(--accent-col);
	}
	address a, address a:hover {
		color: var(--accent-col);
		text-decoration: none;
	}

	.abstract {
		text-align: justify;
		padding-left: 4em;
		padding-right: 4em;
		max-width: calc(var(--max-width) - 8em);
		margin: 0.3em auto;
		p:first-child::before{
			content: "Abstract: ";
			font-weight: bold;
		}
	}

	.disclaimerBox {
		min-height: 3.5em;
		max-width: var(--max-width);
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
		margin-bottom: 1em;
		background-color: #bb0000;
		padding: 0.3em;
		color: white;
		border-radius: var(--corner-radius);
		display: flex;
		.disclaimerSymbol {
			align-self: center;
		}
		.disclaimerSymbol:after {
			content:"⚠️";
			margin: 0.2em;
			font-size: 2em;
		}
		.disclaimer {
			font-weight: bold;
			align-self: center;
			width: 100%;
			flex-grow: 1;
			flex-shrink: 1;
		}
	}
	.content-warnings {
		max-width: var(--max-width);
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: center;
		border: var(--border-width) solid red;
		border-radius: var(--corner-radius);
		align-items: flex-start;
		padding: 0.5em;
		.cw-title {
			font-weight: bold;
			flex-shrink: 0;
		}
		ul {
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0.3em;
			margin-right: 0;
			padding-left: 0;
			display: flex;
			flex-wrap: wrap;
			li {
				padding-left: 0.3em;
				text-align: left;
				display: inline-block;
				&::after {
					content: ", ";
				}
				&:last-child::after {
					content:"";
				}
				&::marker {
					width: 0;
					content: "";
				}
			}
		}
	}
	.noscript {
		text-align: justify;
		&::before {
			content:"⚠️";
		}
	}
}
a.logout-button {
	color: var(--accent-col);
	background-color: var(--accent-inv-col);
	padding: 0.5em 2em;
	border-radius: var(--corner-radius);
	border: solid var(--accent-col) var(--border-width);
	text-decoration: none;
	&:hover, &:focus {
		background-color: var(--accent-inv-col-2);
	}
}

hr, p, h1, h2, h3, h4, h5, h6, dl {
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
}

footer {
	&.presentation-footer {
		display: none;
	}
}

table {
        border-collapse: separate;
	border-spacing: 0;
	margin-left: auto;
	margin-right: auto;
	min-width: var(--max-width);
	border: var(--border-width) solid var(--accent-col);
	border-radius: var(--corner-radius);
	&:has(caption) {
		overflow: hidden;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	caption {
		text-align: left;
		border: var(--border-width) solid var(--accent-col);
		padding: 0.5em;
		border-top-left-radius: var(--corner-radius);
		border-top-right-radius: var(--corner-radius);
		border-bottom: none;
		background-color: var(--inv-col);
	}
	th {
		color: var(--accent-col);
		background-color: var(--accent-inv-col-2);
	}
	td, th {
		text-align: left;
		&:has(>:is(.quantity):only-child) {text-align: right;}
		&:has(>:is(.label):only-child) {text-align: center;}
	}
	th, td {
		padding-top: 0.20em;
		padding-bottom: 0.20em;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	&, th, td, tr {
		border-color: var(--accent-col);
	}
	thead, thead th, thead td  {
		border-bottom: var(--border-width) solid var(--accent-col);
	}
	tfoot {
		border-top: var(--border-width) solid var(--accent-col);
	}
	tr:nth-child(odd) {
		background-color: var(--inv-col);
	}
	tr:nth-child(even) {
		background-color: var(--inv-col-2);
	}
	.unit {
		font-weight: normal;
		color: var(--weak);
	}
}
.block-table, .wide-table {
	overflow-x: auto;
}
.block-table table {
	max-width: var(--max-width);
}
.wide-table {
	th, td {
		border: calc(var(--border-width) / 2) solid var(--accent-col);
		border-left: none;
		border-right: none;
	}
}

.first-col-bold table{
        td:nth-child(1) {
            font-weight: bold;
            color: var(--accent-col);
        }
}

table + table {
	margin-top: 1em;
}

.table-counter{
	font-weight: bold;
}
.data, .data math * {
	font-family: var(--math-fonts);
	text-align: right;
}

video {
	border-color: var(--accent-col);
	border-width: var(--border-width);
	margin-left: auto;
	margin-right: auto;
	display: block;
}

pre, blockquote {
	padding: 0 1rem;
	max-width: var(--max-width);
	border-color: var(--accent-col);
	border-width: var(--border-width);
	margin: 0 auto;
	display: block;
}
ol, ul{
	padding-left: 2rem;
	padding-right: 0;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
}
dt {
	font-weight: bold;
	color: var(--accent-col);
}

@page {
	margin-top: 2cm;
	margin-bottom: 2cm;
}

blockquote, figure {
	background-color: var(--accent-inv-col);
}

:root:has(#Tab-Width-Selector [value="05"]:checked)      { tab-size: 0.5em; .codeIndentation {width: 0.5em;}}
:root:has(#Tab-Width-Selector [value="10"]:checked)      { tab-size: 1.0em; .codeIndentation {width: 1.0em;}}
:root:has(#Tab-Width-Selector [value="20"]:checked)      { tab-size: 2.0em; .codeIndentation {width: 2.0em;}}
:root:has(#Tab-Width-Selector [value="default"]:checked) { tab-size: 3.0em; .codeIndentation {width: 3.0em;}}
:root:has(#Tab-Width-Selector [value="40"]:checked)      { tab-size: 4.0em; .codeIndentation {width: 4.0em;}}
:root:has(#Tab-Width-Selector [value="50"]:checked)      { tab-size: 5.0em; .codeIndentation {width: 5.0em;}}
code {
	white-space: pre;
	.po-ws, .st {
		/*white-space: pre;*/
	}
	font-family: var(--mono-fonts);
	.codeIndentation {
		user-select:all;
		flex-grow: 0;
		flex-shrink: 0;
		margin-left: 0.2em;
		border-left: 0.2em solid var(--accent-col);
		white-space: pre;
		display: inline-block;
		overflow-x: hidden;
	}
	.codeAlignment {
		white-space: pre;
		border-left: 0.1em dotted var(--accent-col);
	}
}

li::marker {
	color: var(--accent-col);
}
li > p, dd > p {
	margin-top: 0;
	margin-bottom: 0;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

math {
	font-family: var(--math-fonts);
}


/************ LINKS *************************/

.decorative {
	width: var(--max-width);
	margin-left: auto;
	margin-right:auto;
}

main a {
	color: inherit;
	text-decoration: underline;

	&:hover:not(:has(img)) {
		color: var(--link-col);
		background-color: var(--inv-col);
	}

	&.footnote-ref {
		line-height: 1em;
	}

	&.footnote-ref, &.footnote-back{
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
		&::after {
			content: "";
		}
	}
	&.footnote-back::before{content: " ";}
}

/************ HEADINGS **********************/

h1, h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	color: var(--accent-col);
	clear: both;
}

hgroup > p {
	font-style: italic;
	font-size: 1.3em;
	font-weight: bold;
	color: var(--accent-col);
}

h1 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	text-align: center;
	hyphens: none;
	text-wrap: balance;
}

h2 {
	margin-top: 1.5rem;
	border-bottom: var(--border-width) dotted var(--accent-col);
}

:is(h1, h2) abbr{
	text-decoration: none;
}

h3 {
	margin-top: 1.25rem;
}

h4 {
	color: var(--main-col);
}


hr{
	color: var(--accent-col);
	clear: both;
}


/************ BOXES *************************/

blockquote, .box {
	border-radius: var(--corner-radius);
	border-color: var(--accent-col);
	border-style: solid;
}
.box {
	padding: 0;
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}
blockquote {
	font-style: italic;
}


table, figure, img, pre, math[display="block"] {
	overflow-x: auto;
}

/************ FIGURES/IMAGES ****************/

figure {
	max-width: var(--max-width);
	display: block;
	border: solid var(--border-width) var(--accent-bg-col);
	border-radius: var(--corner-radius);
	margin: 0.2em;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	vertical-align: top;
	color: var(--inv-main-col);
	a {
		color: var(--accent-link-col);
	}
	a:has(img):hover {
		text-decoration: none;
	}
	figcaption{
		padding: 0.3rem;
		clear: left;
		&::selection {
			color: var(--inv-col) !important;
			background-color: var(--main-col) !important;
		}
	}
	& > img {
		border-style: solid;
		border-width: 0;
	}
	video {
		width: 100%;
	}
	&, img, video {
		background-color: var(--accent-bg-col);
	}
}

figure, img, video {
	display: block;
	max-width: min(100%, var(--max-width));
	height: auto;
	object-fit: contain;

	&.side-image {
		float: right;
		border: var(--border-width) solid var(--accent-col);
		margin-left: 0.5em;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0.2em;
		border-radius: var(--corner-radius);
	}
}

figure:has(.full-width) {
	max-width: 100%;
	img{
		max-width:100%;
		margin: 0 auto;
	}
}

@media only print {
	img.portrait {
		border: none;
		border-radius: 0;
	}
}

/************ NAVIGATION BAR ****************/
nav {
	color: var(--inv-col);
	background-color: var(--accent-bg-col);
	width: 100%;
	border-color: var(--accent-bg-col);
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	/*border-bottom-left-radius: var(--corner-radius);
	border-bottom-right-radius: var(--corner-radius);*/

	> button {
		border: none;
		color: var(--inv-col);
		background-color: var(--accent-bg-col);
		font-size: 1.5em;
		padding: 0 0.5em;
		&:hover{
			background-color: var(--accent-col-2);
		}
	}
	a, hr {
		color: var(--inv-col);
		background-color: var(--accent-bg-col);
		margin: 0;
	}
	a {
		float: left;
		text-decoration: none;
		padding: 0.5em;
		margin: 0;
		flex-grow: 0;
	}
	abbr, .abbr-styled {
		text-decoration: none;
		font-size: 1.5em;
	}
	:is(a, .dropbutton):hover {
		text-decoration: none;
		background-color: var(--accent-col-2);
	}
	.flex-spreader {
		flex-grow: 1;
		margin-left: auto;
		margin-right: auto;
	}
	.dropdown:is(:hover, :focus) .dropdown-content {
		display: block;
	}
	div.dropdown:focus-within {
		background-color: var(--accent-col-2);
		.dropdown-content {
			display: block;
		}
	}
	a:focus {
		background-color: var(--accent-col-2);
	}

	.dropdown {
		float: left;
		overflow: hidden;
		.dropbutton {
			color: var(--inv-col);
			text-decoration: none;
			padding: 0.5em;
			margin: 0;
			outline: none;
			border: none;
		}
		a {
			background-color: oklch(from var(--accent-bg-col) l c h / 0.9);
			&:hover {
				color: var(--main-col);
				background-color: oklch(from var(--accent-col-2) l c h / 0.9);
			}
			&:last-child{
				border-bottom-left-radius: var(--corner-radius);
				border-bottom-right-radius: var(--corner-radius);
			}
		}
	}

	.dropdown-content{
		display: none;
		position: absolute;
		z-index: 1;
		min-width: 10cm;
		a {
			float: none;
			text-decoration: none;
			display: block;
			text-align: left;
		}
	}
}

/************ SETTINGS POPOVER ****************/

.Settings-Popover {
	box-sizing: border-box;
	&:popover-open::backdrop {
		background-color: oklch(from var(--inv-col) l c h / 0.3);
		backdrop-filter: blur(2px);
	}
	text-align: left;
	background-color: var(--inv-col);
	border: var(--accent-col) solid var(--border-width);
	border-radius: var(--corner-radius);
	width: clamp(20em, calc(var(--max-width) - 2em), calc(100% - 2em));
	form {
		display: grid;
		grid: auto / auto 1fr;
		gap: 0.5em;
		label, select, input, button {
			width: 100%;
		}
	}
}

article.comment{
	max-width: var(--max-width);
	border: var(--accent-col) var(--border-width) solid;
	margin: 0.5em auto;
	border-radius: var(--corner-radius);
	overflow: hidden;
	p.comment-heading {
		width: calc(100% - 0.6em);
		margin: 0;
		margin-bottom: 0.5em;
		background-color: var(--accent-inv-col);
		padding: 0.3em;
		display: flex;
		justify-content: space-between;
		border-bottom: var(--accent-col) solid var(--border-width);
		time {
		}
	}
	div.actual-comment {
		margin: 0.3em;
	}
}
form.comment-form {
	&, * {box-sizing: border-box;}
	
	display: grid;
	grid: auto / auto 1fr;
	gap: 0.5em;
	label, select, input, button, textarea {
		width: 100%;
	}
	input[type="text"] {
		border: none;
		border-radius: var(--corner-radius);
	}
	textarea{
		font-family: var(--main-fonts);
		font-size: 1em;
		field-sizing: content;
		min-height: 5em;
		resize: vertical;
		border: none;
		border-radius: var(--corner-radius);
	}
	input[type="submit"] {
		align-self: start;
	}
	&:has(#comment-form-languages [value="en"]:checked) div.comment-form-legal-notes { >p[lang="de"], >p[lang="nl"] {display: none;} }
	&:has(#comment-form-languages [value="de"]:checked) div.comment-form-legal-notes { >p[lang="en"], >p[lang="nl"] {display: none;} }
	&:has(#comment-form-languages [value="nl"]:checked) div.comment-form-legal-notes { >p[lang="de"], >p[lang="en"] {display: none;} }
}

/************ Forms ******************/

#login-status-display {
	align-self: center;
	padding: 0 3em;
}

#login-form, #create-user-form {
	display: grid;
	grid: auto / 10em 1fr;
	gap: 0.4em;
}

#create-user-form {
	h2 {
		border-bottom: none;
		margin-top: 1em;
		margin-bottom: 0.2em;
		font-size: 1.5em;
	}
}

/************ CODE ************************/


pre.sourceCode {
	border-radius: var(--corner-radius);
	border: var(--border-width) solid var(--accent-col);
}

.CodeBlockContainer {
	border-radius: var(--corner-radius);
	border: var(--border-width) solid var(--accent-col);
	margin-left: auto;
	margin-right: auto;
	.CodeBlockHeader {
		border-bottom: var(--border-width) solid var(--accent-col);
		display: flex;
		flex-direction: row;
		background: linear-gradient(
			oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h),
			oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
			oklch(from var(--accent-inv-col-2) l c h),
			oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
			oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h)
		);
		/*background-color: var(--accent-inv-col-2);*/
		border-top-left-radius: var(--inner-corner-radius);
		border-top-right-radius: var(--inner-corner-radius);
		user-select: none;
		.languageDisplay {
			flex-grow: 0;
			flex-shrink: 0;
			padding-left: 0.5em;
			padding-right: 0.5em;
			min-width: 4em;
			font-weight: bold;
			text-align: center;
			border-right: var(--border-width) solid var(--accent-col);
			abbr {text-decoration: none;}
		}
		.fileName {
			font-family: var(--mono-fonts);
			width: 100%;
			flex-grow: 1;
			flex-shrink: 1;
			padding-left: 0.5em;
		}
		.downloadButton {
			border-left: var(--border-width) solid var(--accent-col);
			&::after {
				content: "";
			}
			width: 4em;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			flex-grow: 0;
			flex-shrink: 0;
			border-top-right-radius: var(--corner-radius);
		}
		select.width-selector {
			border: none;
			border-left: var(--accent-col) solid var(--border-width);
			background-color: transparent;
		}
		:is(select, .downloadButton):is(:hover, :focus, :focus-within) {
			background-color: oklch(from var(--main-col) l c h / 0.15);
		}
	}
	pre.sourceCode {
		max-width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		border: none;
		border-radius: 0;
		border-bottom-left-radius: var(--inner-corner-radius);
		border-bottom-right-radius: var(--inner-corner-radius);
	}
	&:has(.CodeBlockHeader select.width-selector [value="normal"]:checked) {max-width: var(--max-width);}
	&:has(.CodeBlockHeader select.width-selector [value="wide"]:checked) {max-width: calc(1.5 * var(--max-width));}
	&:has(.CodeBlockHeader select.width-selector [value="wider"]:checked) {max-width: calc(2 * var(--max-width));}
	&:has(.CodeBlockHeader select.width-selector [value="max"]:checked) {max-width: 100%;}
}

pre.errors{
	font-size: 0.8em;
	border-radius: var(--corner-radius);
	border-color: red;
	border-style: solid;
}

/************ CODE HIGHLIGHTING ***********/
code, .sourceCode {
	--datatype:     oklch(var(--luma) var(--chroma) 0);
	--keyword:      oklch(var(--luma) var(--chroma) 125);
	--numeric:      oklch(var(--luma) var(--chroma) 275);
	--string:       oklch(var(--luma) var(--chroma) 320);
	--char:         oklch(var(--luma) var(--chroma) 320);
	--preprocessor: oklch(var(--luma) var(--chroma) 75);
	--operator:     var(--main-col);
	--other:        var(--main-col);
	--comment:      oklch(var(--luma) var(--chroma) 125);
	--doc-comment:  oklch(var(--luma) var(--chroma) 125);

	span.at { color: var(--datatype); } /* Attribute */
	span.cf { color: var(--keyword); } /* ControlFlow */
	span.ch { color: var(--char); } /* Char */
	span.co { color: var(--comment); font-family: var(--main-fonts);} /* Comment */
	span.cv { color: var(--comment); } /* CommentVar */
	span.do { color: var(--doc-comment); font-family: var(--main-fonts);} /* Documentation */
	span.dt { color: var(--datatype); } /* DataType */
	span.dv { color: var(--numeric); } /* DecVal */
	span.fl { color: var(--numeric); } /* Float */
	span.im { color: var(--preprocessor); } /* Import */
	span.kw, span.fu { color: var(--keyword); font-weight: bold;} /* Keyword */
	span.op { color: var(--operator); } /* Operator */
	span.ot { color: var(--other); } /* Other */
	span.pp { color: var(--preprocessor); } /* Preprocessor */
	span.sc { color: var(--char); } /* SpecialChar */
	span.ss { color: var(--string); } /* SpecialString */
	span.st { color: var(--string); } /* String */
}
div.sourceCode {
	break-inside: avoid;
	padding-right: 0;
	> pre.sourceCode {
		counter-reset: lineCounter 0;
		padding-left: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 0;
		background-color: var(--inv-col);
		> code {
			white-space:normal;
			line-height: 1.6em;
		}
		&.text-art {
			user-select:all;
			> code {
				line-height: 1em;
				* {
					overflow: initial !important;
					white-space: pre !important;
				}
			}
		}
		> code > span, > span {
			display: flex;
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space:normal;
			> span.actual-code {
				white-space: pre-wrap;
				padding-right: 0.3em;
				hyphens: none;
				text-align: left;
			}
			> a {
				flex-shrink: 0;
				flex-grow: 0;
				display: block;
				background-color: var(--accent-inv-col-2);
				background: linear-gradient(to right,
					oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h),
					oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
					oklch(from var(--accent-inv-col-2) l c h),
					oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
					oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h)
				);
				width: 2em;
				padding-right: 0.3em;
				font-family: var(--mono-fonts);
				text-align: right;
				border-right: solid var(--accent-col) var(--border-width);
				margin-right: 0.3em;
				text-decoration: none;
			}
			> a:first-child:hover {
				text-decoration: none;
				color:white;
				background: darkblue;
			}
			> a:after {
				counter-increment: lineCounter;
				content: counter(lineCounter);
				font-size: 1em;
				vertical-align: initial;
				
			}
			&:last-child span.codeIndentation {
				margin-bottom: 0.25em;
			}
		}
		> code > :target, > span:target {
			background-color: var(--accent-inv-col-2);
			a:first-child{
				color:white;
				background: darkblue;
			}
		}
	}
	> pre.shell-interaction.sourceCode {
		white-space:normal;
		overflow: hidden;
		> span {
			display: flex;
			gap: 0;
			>a {
				flex-shrink: 0;
				flex-grow: 0;
				display: block;
				width: 2em;
				margin-right: 0.3em;
			}
			samp, code {
				white-space: pre-wrap;
				text-indent: 2em hanging each-line;
				padding-right: 0.3em;
				hyphens: none;
				text-align: left;
			}
			.shell-interaction-marker {
				flex-shrink: 0;
				flex-grow: 0;
				display: block;
				width: 2em;
				text-align: center;
				font-style: normal;
				order: 3;
				margin-left: auto;
				margin-right: 0;
				border-left: var(--accent-col) solid var(--border-width);
				color: var(--accent-col);
			}
			.root-marker{
				&::after{ content: "#"; }
				font-weight: bold;
				font-style: normal;
			}
			.user-marker{
				&::after{ content: "$"; }
				font-weight: bold;
				font-style: normal;
			}
			.stdin-marker {
				&::after{ content: "→"; }
				font-weight: bold;
				font-style: normal;
			}
			.stdout-marker {
				&::after{ content: "←"; }
				background-color: blue;
				color: white;
				@media print {
					background-color: white;
					color: blue;
				}
			}
			.stderr-marker{
				&::after{ content: "⚠"; }
				background-color: oklch(0.35 0.15 30);
				color: white;
				@media print {
					background-color: white;
					color: darkred;
				}
			}
			.shell-interaction-root{
				font-style: italic;
				color: var(--red);
			}
			.shell-interaction-user{
				font-style: italic;
				color: var(--blue);
			}
			.shell-interaction-stdin{
				font-style: italic;
				color: var(--main-col);
			}
			.shell-interaction-stdout{
				color: var(--main-col);
			}
			.shell-interaction-stderr{
				color: var(--red);
			}
			&:has(.shell-interaction-user), &:has(.shell-interaction-root), &:has(.shell-interaction-stdin) {
				color: var(--accent-col);
				background-color: var(--accent-inv-col);
			}
		}
	}
}
/************* Forms *************/

select, input, button, option {
	font-size: inherit;
	font-family: var(--main-fonts);
}
input[type="radio"], input[type="checkbox"] {
	width: 1em;
	height: 1em;
}

form {
	max-width: var(--max-width);
	background-color: var(--accent-bg-col);
	color: var(--accent-inv-col-2);
	padding: 0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-radius: var(--corner-radius);
	border: 0.1em solid var(--accent-bg-col);
	display: block;
	margin-left: auto;
	margin-right: auto;
	h1, h2, h3, h4, h5, h6, hgroup {
		color: var(--inv-main-col);
		margin-top: 0;
	}
	a {
		color: var(--accent-link-col);
	}
	.poll-result, .solution, .success-good, .success-bad, .success-okay {
		display: none;
	}
	&.successfully-submitted, &.submission-skipped {
		button.submit-button {
			display: none;
		}
		border-color: var(--accent-col);
		background-color: var(--inv-col);
		color: var(--main-col);
		h1, h2, h3, h4, h5, h6, hgroup {
			color: var(--accent-col);
		}
		.option-heading {
			display: flex;
			.solution {
				display: inline;
			}
		}
		.success {
			display: inline-block;
			font-size: 1.5em;
		}
		.poll-result{
			display: flex;
			align-items: center;
			.poll-count, .poll-percent {
				width:3em;
				flex-shrink: 0;
				flex-grow: 0;
				text-align: right;
				padding-right: 0.25em;
			}
			.poll-bar {
				border: 0.1em solid var(--main-col);
				flex-grow: 1;
				flex-shrink: 1;
			}
		}
		.correct-option {
			--poll-bar-col: var(--good-col);
		}
		.wrong-option {
			--poll-bar-col: var(--bad-col);
		}
		.undetermined-option {
			--poll-bar-col: var(--accent-col);
		}
	}
	&.successfully-submitted {
		border-color: var(--good-col);
		.correct-option:has(input:checked),
		.wrong-option:has(input:not(:checked)) {
			.success .success-good {
				display: inline;
				color: var(--good-col);
			}
		}
		.correct-option:has(input:not(:checked)),
		.wrong-option:has(input:checked) {
			.success .success-bad {
				display: inline;
				color: var(--bad-col);
			}
		}
		.undetermined-option {
			.success .success-okay {
				display: inline;
				color: var(--main-col);
			}
		}
	}
	&.submission-failed {
		border-color: var(--bad-col);
	}
}

/************ UTILITIES *************/

span.todo {
	font-style: normal;
	background-color: yellow;
	color:darkred;
	&::before {
		content: "TODO: ";
		font-weight: bold;
		color: red;
	}
}
.font-size-slider{
	position: fixed;
	left: 10px;
	writing-mode: sideways-lr;
	height: 30vh;
	bottom: 0;
	opacity: 0;
	&:hover {
		opacity: 1;
	}
}

div.carousel {
	display: flex;
	
	overflow-x: scroll;
	
	margin: 0 auto;
	background-color: var(--accent-bg-col);
	border-radius: 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	max-width: var(--max-width);

	anchor-name: --carousel;
	border: var(--accent-col) solid var(--border-width);
	border-radius: var(--corner-radius);
	scrollbar-width: none;
	scroll-marker-group: after;
	gap:0.3em;
	padding-bottom: 1.5em;
	&::scroll-button(*) {
		position: fixed;
		position-anchor: --carousel;
		height: 3em;
		width: 3em;
		border-radius: 50%;
		background-color: var(--accent-col);
		color: var(--accent-inv-col);
		border: var(--accent-col) solid var(--border-width);
		opacity: 50%;
		&:hover{
		opacity: 100%;
		}
	}
	&::scroll-button(*):hover, &::scroll-button(*):focus {
		opacity: 100%;
	}
	&::scroll-button(left) {
		content: "◄";
		position-area: center left;
		border-bottom-left-radius: var(--corner-radius);
		border-top-left-radius: var(--corner-radius);
		translate: 100%;
	}
	&::scroll-button(right) {
		content: "►";
		position-area: right center;
		border-bottom-right-radius: var(--corner-radius);
		border-top-right-radius: var(--corner-radius);
		translate: -100%;
	}
	&::scroll-button(*):disabled {
		opacity: 0 !important;
	}
	&::scroll-marker-group {
		display: flex;
		justify-content: center;
		gap: 0.5em;
		translate: 0 -2rem;
	}
	>* {
		margin:0;
		border-radius: 0;
		border: none;
		flex-grow: 1;
		flex-shrink: 0;
		scroll-snap-align: start;
		width: 100%;
		box-sizing: border-box;
		img, picture {
			width: 100%;
		}

		&::scroll-marker {
			content: '♥';
			font-size: 1.5rem;
			text-decoration: none;
			border-radius: 50%;
			color: var(--accent-inv-col-2);
		}
		&::scroll-marker:target-current {
			color: var(--inv-main-col);
		}
	}
}

.confidential.redacted {
	background-color: black;
	color: white;
}
.confidential:not(.redacted) {
	display: contents;
}

/************  DETAILS *************/

.publications li::marker{ content: "🕮︎ "; }


kbd {
	user-select: all;
	color: black;
	background-color: beige;
	line-height: 1.2em;
	height: 1.2em;
	padding-left:0.2em;
	padding-right: 0.2em;
	border: 0.05em solid black;
	border-radius: 0.1em;
	min-width: 1.2em;
	display: inline-block;
	text-align:center;
	box-shadow: inset 0 0 0.2em tan;
	abbr {
		text-decoration: none;
	}
}

/************ PRINT OVERRIDES *************/

@media only print {
	* {
		animation: none !important;
		transition: none !important;
	}
	a.footnoteRef {
		color: var(--accent-col);
	}
	nav, .hidden-in-print, .footnotes a {
		display: none;
	}
	h1, h2, h3, h4, h5, h6 {
		margin-top: 1rem;
		break-after: avoid-page;
	}
	main abbr, main a {
		text-decoration: none;
	}
	main a::after, main a[href^="https"]::after, main a[href^="tel:"]::after, main a[href^="mailto:"]::after {
		content: none;
	}
	figure, figcaption {
		color: var(--main-col);
		background-color: var(--inv-col);
		border-color: var(--main-col);
	}
	.CodeBlockContainer .CodeBlockHeader a {display: none;}
}

/***************** Barchart ***************/

div.barchart {
	padding: 0.5em;
	background-color: var(--inv-col);
	color: var(--main-col);
	display: grid;
	grid: auto / auto 1fr auto;
	gap: 0.5em;
	align-items: center;
	div.barchart-entry {
		display: contents;
		span.barchart-label {
			color: var(--accent-col);
		}
		svg.barchart-bar {
			background-color: var(--accent-inv-col-2);
			width: calc(100% - 2 * var(--border-width));
			border: var(--accent-col) solid var(--border-width);
			border-radius: var(--corner-radius);
		}
		span.barchart-ratio-label {
			color: var(--accent-col);
			text-align: right;
		}
	}
}