/*** COLOR SCHEME ***/
:root {
	color-scheme: light dark;
	--b: #ededed;
	--f: #121212;
	--a: #0000ff;
	--l: #7f7f7f;
}
/* Invert the colors in dark mode, including for some images */
@media only screen and (prefers-color-scheme: dark) {
	:root {
		--b: #121212;
		--f: #ededed;
		--a: #ffff00;
		--l: #7f7f7f;
	}
	.darkinv {
		filter: invert(100%);
	}
}
html {
	color: #121212;
	color: var(--f);
	background: #ededed;
	background: var(--b);
}


/*** BASIC STRUCTURE ***/
/* Increase font size on mobile Firefox. I don't like this kind
 * of specific fix, but the font is ridiculously small for me. */
@supports (-moz-appearance: none) {
	@media only screen and (hover: none) and (pointer: coarse) {
		html {
			font-size: 200%
		}
	}
}
body {
	/* Improve consistency between systems */
	font-family: sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Center text and limit its width */
	max-width: 80ch;
	padding: 1ch;
	margin: auto;

}
/* Basic layout: header, article, footer */
#header {
	display: block;
	height: 3rem;
	font-size: 2.1rem;
	position: relative; /* for `#nav' */
}
#article {
	display: block;
	margin: 1rem 0;
}
#footer {
	display: block;
}
/* Ensure that `body' padding applies to bottom of `#footer' too */
#footer:after {
	content: "";
	display: block;
	clear: both;
}


/*** COMMON TAGS ***/
h1 {
	text-align: center;
	font-size: 2.1rem;
}
h2 {
	text-align: center;
	font-size: 1.8rem;
}
h3 {
	text-align: center;
	font-size: 1.5rem;
}
h4 {
	text-align: center;
	font-size: 1.2rem;
	font-style: italic;
}
a {
	background-color: transparent; /* normalize.css */
	text-decoration: none;
	color: #0000ff;
	color: var(--a);
}
img {
	border-style: none; /* normalize.css */
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}
table {
	margin: auto;
}
td {
	padding: 0 1.5rem;
}
/* TODO: this rule fixes code font on Firefox and Chromium,
 * but currently messes with code snippets a bit too much. */
/*code, pre {
	font-family: monospace, monospace;
	font-size: 1em;
}*/


/*** HEADER & FOOTER ***/
/* Break footer into multiple lines on narrow screens */
@media only screen and (max-width: 69ch) {
	#footer > div {
		width: 100%;
	}
}
/* Only highlight header/footer links on hover/click */
.no-hl-a a:link,
.no-hl-a a:visited {
	color: #121212;
	color: var(--f);
}
.no-hl-a a:hover,
.no-hl-a a:focus,
.no-hl-a a:active {
	color: #0000ff;
	color: var(--a);
}
/* Push header/footer elements to edges of body */
.align-l {
	float: left;
	text-align: left;
}
.align-r {
	float: right;
	text-align: right;
}
/* Visual separator between header, article and footer */
hr {
	border-top: 2px solid;
	border-color: #7f7f7f;
	border-color: var(--l);
	border-bottom: none;
}


/*** NAVIGATION ***/
/* Don't let `#nav-list` affect surroundings */
#nav {
	position: absolute;
	top: 0;
	right: 0;
}
/* Not a real link, so don't highlight it */
#nav-show {
	color: #121212;
	color: var(--f);
}
/* Submenu hidden until interaction, then appears on top.
 * Delay disappearance to hide flicker on mobile Firefox. */
#nav-list {
	visibility: hidden;
	max-height: 0;
	transition-delay: 0.3s;
	position: relative;
	z-index: 1;
	border: 2px solid;
	background: #ededed;
	background: var(--b);
}
/* Unhide on hover, click, and Tab-key focus */
#nav:hover > #nav-list,
#nav:focus-within > #nav-list,
#nav-show:hover + #nav-list,
#nav-show:focus + #nav-list,
#nav-show:active + #nav-list {
	visibility: visible;
	max-height: 9999px;
	transition-delay: 0s;
}
/* For the entries in `#nav-list' */
.nav-entry {
	padding: 0 0.5rem 0.2rem 0.5rem;
}
.nav-entry + .nav-entry {
	border-top: 2px solid;
	border-color: #7f7f7f;
	border-color: var(--l);
}
.nav-entry-name {
	font-size: 2rem;
}
.nav-entry-desc {
	font-size: 1rem;
}


/*** COLLAPSIBLE BOXES ***/
.collapse-hidden {
	display: none;
}
/* Invisible checkbox, toggled by clicking label */
.collapse-toggle {
	display: none;
}
.collapse > label,
.collapse-starts + p > label {
	color: #0000ff;
	color: var(--a);
	cursor: pointer;
}
/* When the checkbox is ticked, hide label and show contents */
.collapse-toggle:checked + label {
	display: none;
}
.collapse-toggle:checked + label + .collapse-hidden {
	display: block;
}
.collapse-starts + p {
	margin-top: 0;
}
/* Visual differentiator for collapsible proofs */
.proof {
	padding: 0.25rem 0.5rem;
	border: 3px dotted;
}


/*** MATHS TWEAKS ***/
/* Prevent vertical overflow, allow horizontal scrolling */
.katex-display {
	padding-top: 0.25rem;
	overflow-x: auto;
	overflow-y: hidden;
}
/* Don't allow line breaks in inline formulas */
p > .katex {
	white-space: nowrap;
}