/* Global color palette */
:root {
	--color-black: #0e0e0e;
	--color-dark-grey: #1e1e1e;
	--color-light-grey: #2e2e2e;

	--color-red: #885164;
	--color-green: #446c49;
	--color-yellow: #bf7558;
	--color-blue: #58688c;
	--color-magenta: #4d3066;
	--color-cyan: #588c89;
	--color-dark-white: #bcb9cb;

	--color-grey: #6d6978;
	--color-light-red: #c76f7f;
	--color-light-green: #569953;
	--color-light-yellow: #eaa16c;
	--color-light-blue: #82aac3;
	--color-light-magenta: #77498a;
	--color-light-cyan: #82c2c3;
	--color-white: #e2dff4;
}

/* Global font families */
@font-face {
	font-family: "Sans";
	font-weight: normal;
	src:
		local("Fira Sans"),
		local("FreeSans"),
		local("Adwaita Sans"),
		local("OpenSans"),
		local("Liberation Sans");
}

@font-face {
	font-family: "Bitter";
	font-weight: bold;
	src:
		local("Bitter Bold"),
		url("/Bitter-Bold.woff2") format("woff2");
}

html {
	background-color: var(--color-black);
	overflow: auto;
}

body {
	overflow: inherit;
	margin: 0 auto 0 auto;
	max-width: 980px;
	width: 100%;
	font-family: "Sans";
	font-size: 1.2em;
	background-color: var(--color-dark-grey);
	color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Bitter";
}

.error {
	color: var(--color-red);
}

.hint {
	font-style: italic;
	color: var(--color-dark-white);
}

.required {
	color: var(--color-light-red);
}

header, .page > .description, .field > .body, footer {
	padding: 0 2em;
}

input, fieldset, textarea {
	margin: 0.5em 0;
	font-size: 1.2em;
}

textarea {
	font-family: "Sans";
}

input[type=checkbox], input[type=radio] {
	margin: 0 0;
}

fieldset {
	border: none;
}

summary {
	list-style: none;
	display: grid;
	padding-right: 2em;
	grid-template-columns: 2em 1fr;
	background-color: var(--color-light-grey);
}

summary::before {
	content: '';
	display: block;
	margin: auto;
	width: 0.5em;
	height: 0.5em;
	border-style: solid solid none none;
	border-color: var(--color-white);
	border-width: 0.3em;
	transform: rotate(45deg);

	transition-property: transform;
	transition-duration: 100ms;
	transition-timing-function: linear;
}

details[open] > summary {
	background-color: var(--color-dark-grey);
}

details[open] > summary::before {
	transform: rotate(135deg);
}

details[open] > summary > h2::after {
	content: '';
	display: block;
	height: 0.2em;
	background-color: var(--color-light-cyan);
}

details[open] > summary > h3::after {
	content: '';
	display: block;
	height: 0.15em;
	background-color: var(--color-cyan);
}

summary:hover {
	cursor: pointer;
}

.page > .header h2 {
	margin: 0.5em 0;
}

.field > .header h3 {
	margin: 0.5em 0;
}

header {
	overflow: auto;
}

details.page > summary {
	overflow: auto;
}

details.field > summary {
	overflow: auto;
}

p {
	margin: 0.5em 0;
}

footer {
	text-align: center;
}

footer button {
	appearance: none;
	margin: 0.5em 0;
	border: none;
	width: 100%;
	font-size: 2em;
	color: var(--color-white);
	background-color: var(--color-cyan);
	box-shadow: 0 0.2em var(--color-light-cyan);

	transition-property: transform, box-shadow;
	transition-duration: 100ms;
	transition-timing-duration: linear;
}

footer button:hover {
	cursor: pointer;
	box-shadow: 0 0 var(--color-light-cyan);
	transform: translateY(0.2em);
}

a {
	color: var(--color-light-cyan);
}

a:visited {
	color: var(--color-cyan);
}

header, footer {
	padding-bottom: 1em;
}