:root {
	--text-button: #f9f9f9;
	--background-button: #333333;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-normal: #cccccc;
		--text-code: #f9f9f9;
		--background-normal: #222222;
		--background-code: #333333;
		--background-lighter: #555555;
	}

	/* code highlighting */
    code span.al { color: #ffcfaf; } /* Alert */
    code span.an { color: #7f9f7f; font-weight: bold; } /* Annotation */
    code span.at { } /* Attribute */
    code span.bn { color: #dca3a3; } /* BaseN */
    code span.bu { } /* BuiltIn */
    code span.cf { color: #f0dfaf; } /* ControlFlow */
    code span.ch { color: #dca3a3; } /* Char */
    code span.cn { color: #dca3a3; font-weight: bold; } /* Constant */
    code span.co { color: #7f9f7f; } /* Comment */
    code span.cv { color: #7f9f7f; font-weight: bold; } /* CommentVar */
    code span.do { color: #7f9f7f; } /* Documentation */
    code span.dt { color: #dfdfbf; } /* DataType */
    code span.dv { color: #dcdccc; } /* DecVal */
    code span.er { color: #c3bf9f; } /* Error */
    code span.ex { } /* Extension */
    code span.fl { color: #c0bed1; } /* Float */
    code span.fu { color: #efef8f; } /* Function */
    code span.im { } /* Import */
    code span.in { color: #7f9f7f; font-weight: bold; } /* Information */
    code span.kw { color: #f0dfaf; } /* Keyword */
    code span.op { color: #f0efd0; } /* Operator */
    code span.ot { color: #efef8f; } /* Other */
    code span.pp { color: #ffcfaf; font-weight: bold; } /* Preprocessor */
    code span.sc { color: #dca3a3; } /* SpecialChar */
    code span.ss { color: #cc9393; } /* SpecialString */
    code span.st { color: #cc9393; } /* String */
    code span.va { } /* Variable */
    code span.vs { color: #cc9393; } /* VerbatimString */
    code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */

    code a.pp { color: #ffcfaf; font-weight: bold; text-decoration: underline; } /* Preprocessor */
}

@media (prefers-color-scheme: light) {
	:root {
		--text-normal: #212121;
		--text-code: #424242;
		--background-normal: #fff;
		--background-code: #eee;
		--background-lighter: #ddd;
	}

	img[src$=".svg"].mermaid {
		filter: invert(1) contrast(2);
	}

	img.graph {
		filter: invert(1);
	}

	/* code highlighting */
	code span.al { color: #ef2929; } /* Alert */
    code span.an { color: #8f5902; font-weight: bold; } /* Annotation */
    code span.at { color: #204a87; } /* Attribute */
    code span.bn { color: #0000cf; } /* BaseN */
    code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #4e9a06; } /* Char */
    code span.cn { color: #8f5902; } /* Constant */
    code span.co { color: #8f5902; } /* Comment */
    code span.cv { color: #8f5902; font-weight: bold; } /* CommentVar */
    code span.do { color: #8f5902; font-weight: bold; } /* Documentation */
    code span.dt { color: #204a87; } /* DataType */
    code span.dv { color: #0000cf; } /* DecVal */
    code span.er { color: #a40000; font-weight: bold; } /* Error */
    code span.ex { } /* Extension */
    code span.fl { color: #0000cf; } /* Float */
    code span.fu { color: #204a87; font-weight: bold; } /* Function */
    code span.im { } /* Import */
    code span.in { color: #8f5902; font-weight: bold; } /* Information */
    code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
    code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
    code span.ot { color: #8f5902; } /* Other */
    code span.pp { color: #8f5902; } /* Preprocessor */
    code span.sc { color: #ce5c00; font-weight: bold; } /* SpecialChar */
    code span.ss { color: #4e9a06; } /* SpecialString */
    code span.st { color: #4e9a06; } /* String */
    code span.va { color: #000000; } /* Variable */
    code span.vs { color: #4e9a06; } /* VerbatimString */
    code span.wa { color: #8f5902; font-weight: bold; } /* Warning */

    code a.pp { color: #8f5902; text-decoration: underline; } /* Preprocessor */
}

html {
	line-height: 1.5;
	font-family: Georgia, serif;
	font-size: 20px;
	color: var(--text-normal);
	background-color: var(--background-normal);
	transition: background-color 100ms linear;
}

body {
	margin: 0 auto;
	max-width: 40em;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	hyphens: auto;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

.center {
    display: block;
    margin: auto;
	text-align: center;
}

.smaller-font {
	font-size: 17px;
}

.small-font {
	font-size: 14px;
}

img[src$=".svg"].mermaid {
	margin: 0 auto;
	display: block;
}


@media (max-width: 600px) {
	body {
		font-size: 0.86em;
		padding: 1em;
	}

	h1 {
		font-size: 1.6em;
	}
}

@media (max-width: 1400px) {
	nav, #TOC {
		display: none !important;
	}

}

@media (max-width: 1024px) {
	div.buttons {
		display: none !important;
	}
}

@media print {
	body {
		background-color: transparent;
		color: black;
		font-size: 12pt;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3,
	h4 {
		page-break-after: avoid;
	}

	nav, #TOC {
		display: none !important;
	}

	div.buttons {
		display: none !important;
	}

	figure img[src$=".svg"] {
		max-height: 40vh;
	}
}

@font-face {
	font-family: 'cap';
	src: url('res/cap.ttf') format('truetype');
	font-display: swap;
}

::selection {
	background-color: var(--text-normal);
	color: var(--background-normal);
}

p {
	margin: 1em 0;
	text-align: justify;
}

.cap {
	font-family: cap;
	margin: 0.1em 0.1em -0.2em 0;
	float: left;
	font-size: 5em;
	line-height: 1;
	/* padding-top: 4px; */
	/* padding-right: 8px; */
	/* padding-left: 3px; */
}

a {
	color: var(--text-normal);
}

a:visited {
	color: var(--text-normal);
}

img {
	max-width: 100%;
}

li br {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 1.4em;
}

h5,
h6 {
	font-size: 1em;
	font-style: italic;
}

h6 {
	font-weight: normal;
}

ol,
ul {
	padding-left: 1.7em;
	margin-top: 1em;
}

li>ol,
li>ul {
	margin-top: 0;
}

blockquote {
	margin: 1em 0 1em 1.7em;
	padding-left: 1em;
	border-left: 2px solid #e6e6e6;
	/* color: #606060; */
}

code {
	font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
	font-size: 85%;
	padding: 2px;
	margin: 0;
}

pre {
	margin: 1em 0;
	overflow: auto;
	padding: 6px;
}

pre code {
	padding: 0;
	overflow: visible;
	overflow-wrap: normal;
}

hr {
	background-color: #555555;
	border: none;
	height: 1px;
	margin: 1em 0;
}

table {
	display: block;
	margin: 1em auto;
	border-collapse: collapse;
	font-variant-numeric: lining-nums tabular-nums;
	overflow: auto;
	width: fit-content;
	max-height: 40vh;
}

table caption {
	margin-bottom: 0.75em;
}

tbody {
	margin-top: 0.5em;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
}

th {
	border-top: 1px solid #555555;
	padding: 0.25em 0.5em 0.25em 0.5em;
	background-color: var(--background-normal);
	position: sticky;
	top: 0;
}

td {
	padding: 0.125em 0.5em 0.25em 0.5em;
	font-family: monospace;
}

header {
	margin-bottom: 4em;
	text-align: center;
}

header p {
	text-align: center !important;
}

#TOC {
	position: fixed;
	left: 3%;
	top: 50%;
	transform: translateY(-50%);
	overflow: auto;
}

#TOC li {
	list-style: none;
}

#TOC ul {
	padding-left: 1.3em;
}

#TOC>ul {
	padding-left: 0;
}

#TOC a:not(:hover) {
	text-decoration: none;
}

figure img[src$=".svg"] {
	margin: 0 auto;
	display: block;
}

code, pre, div.sourceCode {
	background-color: var(--background-code);
	color: var(--text-code);
	border-radius: 8px;
	margin: 0;
}

.code-showcase, .code-showcase > * {
	background-color: transparent;
	margin: 0 auto;
	width: fit-content;
	max-width: 100%;
	white-space: pre;
}

span.smallcaps {
	font-variant: small-caps;
}

span.underline {
	text-decoration: underline;
}

div.column {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

div.hanging-indent {
	margin-left: 1.5em;
	text-indent: -1.5em;
}

ul.task-list {
	list-style: none;
}

div.buttons {
	display: flex;
	flex-flow: column;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	margin: 3%;
	color: var(--text-button);
}

div.buttons button {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: 0;
	margin: 16px 0;
	background-color: var(--background-button);
	color: var(--text-button);
}

div.buttons button svg {
	width: 2em;
	height: 2em;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

div.popover {
	display: none;
	z-index: 10;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

div.popover div {
	z-index: 15;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-height: 30%;
	max-width: 100%;
	border-radius: 8px;
	border: 1px solid var(--text-code);
	background-color: var(--background-code);
	padding: 16px;
}

details, button {
	background-color: var(--background-code);
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
    color: var(--text-code);
    border: 0;
}