/* Colour scheme */
:root {
	--b: #ededed;
	--f: #121212;
	--a: #0000ff;
}
.darkinv {}
@media only screen and (prefers-color-scheme: dark) {
	:root {
		--b: #121212;
		--f: #ededed;
		--a: #ffff00;
	}
	.darkinv {filter: invert(100%)}
}

/* Basic elements */
body {
	background: #ededed;
	background: var(--b);
	color: #121212;
	color: var(--f);

	max-width: 80ch;
	margin: auto;
	padding: 1rem 0;

	font-family: sans-serif;
	line-height: 1.5;
}
h1,h2,h3 {text-align: center;}
h1 {font-size: 2.0rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.2rem;}
a {
	text-decoration: none;
	color: #0000ff;
	color: var(--a);
}
img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

/* Header and footer */
.nav {
	height: 3rem;
	font-size: 2.4rem;
	padding: 0.25rem 0;
}
.navl {
	float: left;
	text-align: left;
}
.navr {
	float: right;
	text-align: right;
}
.footl {
	float: left;
	text-align: left;
}
.footr {
	float: right;
	text-align: right;
}
@media only screen and (max-width: 72ch) {
	.navl, .footl, .footr {width: 100%;}
	.navr {
		width: 100%;
		font-size: 1.8rem;
	}
}
.noha a:link, .noha a:visited {
	color: #121212;
	color: var(--f);
}
.noha a:hover, .noha a:focus, .noha a:active {
	color: #0000ff;
	color: var(--a);
}

/* Collapsible boxes */
label {
	color: #0000ff;
	color: var(--a);
	cursor: pointer;
}
.accordion {
	display: block;
	padding: 0 0.5rem;
	border-style: dotted;
}
input {display: none;}
input + label + .hidden {display: none;}
input:checked + label {display: none;}
input:checked + label + .hidden {display: block;}