:root {
	--tardis-blue: #003b6f;
}

@font-face {
	font-family: "body";
	src: url("cmunorm.otf");
}

@font-face {
	font-family: "title";
	src: url("cmunssdc.otf");
}

body {
	background: #d1ffd7;
	color: var(--tardis-blue);
	font-family: "body", serif;
	font-size: 1.6rem;
	line-height: 2.4rem;
	width: min(64ch, 80%);
	margin: auto;
}

code {
	font-size: 0.82em;
}

h1, h2, h3, h4 {
	font-family: "title", sans-serif;
}

h1 a {
	color: inherit;
	text-decoration: inherit;
}

footer {
	font-size: 1rem;
	line-height: 1.2rem;
	margin: 2rem auto 2rem auto;
	padding-top: 0.5rem;
	border-top: solid;
}

header {
	font-size: 1.8rem;
	line-height: 2.8rem;
	margin: 1rem auto auto auto;
	border-bottom: solid;
}

header h3 {
	text-align: right;
}

.faq li:not(:last-child) {
	margin-bottom: 2.2rem;
}

.spoiler {
	cursor: grab;
	border-bottom: 0.1em dotted;
	border-bottom-color: var(--tardis-blue);
}

.invisible {
	color: transparent;
}

.spoiler.visible .spoiler-text {
	display: none;
}

.spoiler.invisible .spoiler-text {
	color: initial;
	position: absolute;
	margin-top: 0.25rem;
	font-size: 1rem;
	font-style: italic;
}

/* Images... */
div.figure {
	text-align: center;
}

/* ...and their captions */

div.figure > p {
	margin-bottom: 0;
	margin-left: 10%;
	margin-right: 10%;
}

div.figure + p {
	text-align: center;
	margin-top: 0;
	margin-left: 10%;
	margin-right: 10%;
	font-size: 75%;
	line-height: 120%;
}

/* Quotes */
blockquote {
	margin-left: 0;
	border-left: 5px solid grey;
	padding-left: 4rem;
}

/* Sidebar */
.sidebar {
	text-align: center;
}

.sidebar ul {
	padding-left: 0;
	margin: 0 auto 3.2rem auto;
	border-bottom: solid;
}

.sidebar ul li {
	display: inline;
}

.sidebar ul li:before {
	content: '– ';
}

.sidebar ul li:first-child:before {
	content: '';
}

/* Links */
a {
	color: inherit;
	text-decoration-style: wavy;
}

a.external {
	text-decoration-style: solid;
}

/* a.external:before { */
/* 	content: '➔ '; */
/* 	font-size: 50%; */
/* 	vertical-align: middle; */
/* } */