/* -------------------------------------------- */
/* Colors */
/* -------------------------------------------- */
:root[data-theme="dark"] {
	/* Background */
	--bg-hard    : #1d2021;
	--bg         : #282828;
	--bg-soft    : #32302f;
	--bg1        : #3c3836;
	--bg2        : #504945;
	--bg3        : #665c54;
	--bg4        : #7c6f64;
	/* Foreground */
	--fg         : #ebdbb2;
	--fg1        : #d5c4a1;
	--fg2        : #bdae93;
	--fg3        : #a89984;
	--fg4        : #a89984;
	/* Bright accents */
	--red        : #fb4934;
	--green      : #b8bb26;
	--yellow     : #fabd2f;
	--blue       : #83a598;
	--purple     : #d3869b;
	--aqua       : #8ec07c;
	--orange     : #fe8019;
	/* Faded accents */
	--red-dim    : #cc241d;
	--green-dim  : #98971a;
	--yellow-dim : #d79921;
	--blue-dim   : #458588;
	--purple-dim : #b16286;
	--aqua-dim   : #689d6a;
	--orange-dim : #d65d0e;
}
:root[data-theme="light"] {
	/* Background */
	--bg-hard    : #f9f5d7;
	--bg         : #fbf1c7;
	--bg-soft    : #f2e5bc;
	--bg1        : #ebdbb2;
	--bg2        : #d5c4a1;
	--bg3        : #bdae93;
	--bg4        : #a89984;
	/* Foreground */
	--fg         : #3c3836;
	--fg1        : #504945;
	--fg2        : #665c54;
	--fg3        : #7c6f64;
	--fg4        : #7c6f64;
	/* Bright accents */
	--red        : #fb4934;
	--green      : #b8bb26;
	--yellow     : #fabd2f;
	--blue       : #83a598;
	--purple     : #d3869b;
	--aqua       : #8ec07c;
	--orange     : #fe8019;
	/* Faded accents */
	--red-dim    : #9d0006;
	--green-dim  : #79740e;
	--yellow-dim : #b57614;
	--blue-dim   : #076678;
	--purple-dim : #8f3f71;
	--aqua-dim   : #427b58;
	--orange-dim : #af3a03;
}
/* -------------------------------------------- */
/* Layout-independent settings */
/* -------------------------------------------- */
/* Basic styles */
body {
	padding-right: 2em;
	padding-left: 2em;
	color: var(--fg);
	background-color: var(--bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
							 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-size: 14pt;
}
h1 {
	color: var(--fg2);
	font-size: 200%;
}
h2 {
	color: var(--fg2);
	font-size: 170%;
}
h3 {
	color: var(--fg2);
	font-size: 150%;
	text-align: justify !important;
}
h1, h2, h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	text-align: center;
}
em, i {
	font-style: italic;
	color: var(--fg1);
}
strong {
	font-weight: bold;
	color: var(--fg1);
}
a {
	text-decoration-line: underline;
}
a:link {
	color: var(--blue);
}
a:visited {
	color: var(--purple);
}
a:hover {
	color: var(--blue-dim);
}
a:active {
	color: var(--fg1);
}
ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}
ol>li {
  display: list-item;
}
pre>code, code {
	font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', "Courier New", Courier, monospace;
	background-color: var(--bg-soft);
	line-height: 1.25;
}
pre>code {
	display: block;
	overflow-x: auto;
}
/* Line numbers for Pandoc */
pre.lineNumbers {
	margin-left: 3.5em; /* Make space for the line numbers */
}
pre.lineNumbers>code {
	counter-reset: source-line;
	position: relative;
}
pre.lineNumbers>code>span {
	display: inline-block;
	line-height: 1.25;
}
pre.lineNumbers>code::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2.25em;
	width: 1px;
	background-color: var(--bg4);
}
pre.lineNumbers>code>span:empty {
	line-height: 1.25;
}
pre.lineNumbers>code>span::before {
	/* Show counter */
	content: counter(source-line);
	counter-increment: source-line;
	/* Place line numbers */
	width: 2em;
	text-align: right;
	/* Style element */
	color: var(--fg4);
	z-index: 1;
	position: sticky;
	display: inline-block;
	padding-right: 0.5em;
	/* Make them unselectable */
	user-select: none;
	-webkit-user-select: none;
}
p {
	text-indent: 2em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	line-height: 1.25;
}
li p {
	text-indent: 0;
	margin-bottom: 0;
	margin-top: 0;
}
/* Unordered lists in markdown style */
li::before {
	padding-right: 0.5em;
}
ul li::before {
	color: var(--red);
	content: "*";
}
ul ul li::before {
	color: var(--green);
	content: "-";
}
ul ul ul li::before {
	color: var(--blue);
	content: "+";
}
ul {
	list-style-position: outside;
	padding-left: 1.5em;
}
li {
	display: list-item;
}
/* Colors */
span.bg-hard { color: var(--bg-hard); }
span.bg { color: var(--bg); }
span.bg-soft { color: var(--bg-soft); }
span.bg1 { color: var(--bg1); }
span.bg2 { color: var(--bg2); }
span.bg3 { color: var(--bg3); }
span.bg4 { color: var(--bg4); }
span.fg { color: var(--fg); }
span.fg1 { color: var(--fg1); }
span.fg2 { color: var(--fg2); }
span.fg3 { color: var(--fg3); }
span.fg4 { color: var(--fg4); }
span.red { color: var(--red); }
span.green { color: var(--green); }
span.yellow { color: var(--yellow); }
span.blue { color: var(--blue); }
span.purple { color: var(--purple); }
span.aqua { color: var(--aqua); }
span.orange { color: var(--orange); }
span.red-dim { color: var(--red-dim); }
span.green-dim { color: var(--green-dim); }
span.yellow-dim { color: var(--yellow-dim); }
span.blue-dim { color: var(--blue-dim); }
span.purple-dim { color: var(--purple-dim); }
span.aqua-dim { color: var(--aqua-dim); }
span.orange-dim { color: var(--orange-dim); }
/* Elements */
section.entry, div.entry {
	border: 2px solid var(--aqua);
	border-radius: 5px;
	padding: 1em;
	overflow: auto;
}
div.note {
	border: 2px dashed var(--red);
	border-radius: 5px;
	display: block;
}
div.note>p:first-of-type::before {
	color: var(--red);
	content: "NOTE: ";
	display: inline;
  font-weight: bold;
	margin-right: 0.5em;
}
/* Header */
header div.header {
	padding: 1em;
	border: 2px dotted var(--yellow-dim);
	border-radius: 5px;
	background-color: var(--bg1);
	gap: 1em;
	margin-bottom: 3em;
	text-align: center;
}
header div.header-title {
	padding: 1em;
}
header div.header-theme-switcher {
	margin-left: auto;
}
header div p.header-name {
	font-size: 200%;
	text-indent: 0;
	margin-bottom: 0;
	margin-top: 0;
}
header div.header-theme-switcher button {
	color: var(--fg);
	background-color: var(--bg1);
	border: 2px solid var(--bg4);
	border-radius: 5px;
	font-size: inherit;
	cursor: pointer;
}
/* Navigation part */
nav {
	border: 2px dashed var(--purple);
	border-radius: 5px;
	background-color: var(--bg1);
	padding: 1em;
}
nav .nav-toggle {
	cursor: pointer;
}
nav summary {
	font-size: 150%;
	color: var(--green);
}
nav ul li::before {
	color: var(--fg);
	content: "━";
}
nav ul ul li::before {
	color: var(--fg);
	content: "┗";
}
nav ul ul ul li::before {
	color: var(--fg);
	content: "┗";
}
nav li>details>summary {
	color: var(--fg);
	font-size: 100%;
	list-style: none;
	display: flex;
	align-items: center;
	cursor: pointer;
}
nav li>details>summary::marker {
	display: none;
	content: "";
}
nav li>details>summary::-webkit-details-marker {
	display: none;
}
nav li {
	display: flex;
}
/* Footer */
footer div {
	border: 2px dotted var(--yellow-dim);
	border-radius: 5px;
	background-color: var(--bg1);
	margin-top: 3em;
	text-align: center;
}
footer div p {
	padding: 0.5em;
	text-indent: 0;
	margin-bottom: 0;
	margin-top: 0;
}
footer div p.footer-name {
	font-size: 150%;
}
/* Code doc style */
section.decl {
	border-width: 2px;
	border-radius: 5px;
	border-style: solid;
	padding: 1em;
	margin: 1em;
	overflow: auto;
}
section.func-decl {
	border-color: var(--green);
}
section.var-decl {
	border-color: var(--red);
}
section.definer-decl {
	border-color: var(--blue);
}
section.struct-decl {
	border-color: var(--purple);
}
section.enum-decl {
	border-color: var(--orange);
}
section.typedef-decl {
	border-color: var(--red-dim);
}
section.typedef-struct-decl {
	border-color: var(--purple-dim);
}
section.typedef-enum-decl {
	border-color: var(--orange-dim);
}
section.typedef-func-decl {
	border-color: var(--green-dim);
}
section.decl>h2 {
	text-align: justify !important;
}
section.decl span.arglist-type {
}
section.decl span.enumval-list,
section.decl span.arglist-name,
section.decl span.fieldlist-name {
	color: var(--blue);
	font-family: monospace;
}
section.decl span.fieldlist-type {
}
section.decl span.argref-name,
section.decl span.fieldref-name {
	position: relative;
	cursor: help;
	border-bottom: 1px dotted var(--fg3);
}
section.decl span.argref-name>span.argref-type,
section.decl span.fieldref-name>span.fieldref-type {
	/* Hover feature */
	visibility: hidden;
	position: absolute;
	bottom: 125%; /* Position above the text */
	left: 50%;
	transform: translateX(-50%);
	/* Styling */
	z-index: 10;
	opacity: 0;
	transition: opacity 0.2s;
}
section.decl span.argref-name:hover>span.argref-type,
section.decl span.fieldref-name:hover>span.fieldref-type {
	visibility: visible;
	opacity: 1;
}
section.decl span.argref-name,
section.decl span.fieldref-name,
section.decl span.enumval-ref {
	color: var(--aqua);
}
section.decl span.return-type {
	font-style: italic;
}
section.decl span.return-type:before {
	color: var(--red);
	content: "Return: ";
}
h2 span.symbols-list-elem {
	display: block;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--bg2);
}
/* -------------------------------------------- */
/* Layouts */
/* -------------------------------------------- */
/* Main layout container */
div.nav-container {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	flex-wrap: nowrap;
}
/* Desktop layout */
@media screen and (min-width: 901px) {
	/* Horizontal stacking of blocks */
	div.nav-nav-box {
		position: sticky;
		top: 0;
		flex: 1 1 0;
		min-width: 0;
		padding: 1em;
		padding-top: 5em;
	}
	div.nav-nav-box nav {
		overflow: auto;
	}
	div.nav-content-box {
		flex: 4 1 0;
		min-width: 0;
		padding: 1em;
	}
	/* Narrow header and footer */
	footer {
		width: 50%;
		padding-left: 25%;
	}
	header {
		width: 50%;
		padding-left: 25%;
	}
	/* Horizontal header layout */
	header div.header {
		display: flex;
		align-items: center;
		position: relative;
	}
	header div.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	header div.header-theme-switcher {
		margin-left: auto;
	}
}
/* Mobile layout */
@media screen and (max-width: 900px) {
	body {
		font-size: 12pt;
	}
	/* Vertical stacking of blocks */
	div.nav-container {
		flex-direction: column;
	}
	div.nav-nav-box,
	div.nav-content-box {
		flex: none;
		width: 100%;
		padding-top: 1em;
	}
	div.nav-nav-box {
		padding-bottom: 0;
	}
	div.nav-content-box {
		padding-top: 0;
	}
	/* Wide header and footer */
	footer {
		width: 100%;
	}
	header {
		width: 100%;
	}
	/* Vertical header layout */
	header div.header {
		flex-direction: column;
		align-items: center;
		position: static;
	}
	header div.header-title {
		position: static;
		transform: none;
		margin-bottom: 0.5em;
	}
	header div.header-theme-switcher {
		margin-left: 0;
	}
	nav summary {
		font-weight: bold;
	}
}
