* {
	box-sizing: border-box;
}

:root {
	font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
	font-optical-sizing: auto;
	/* fix for Chrome */
	font-feature-settings:
		"liga" 1,
		"calt" 1;

	--theme-brand-l: #4cffefff;
	--theme-brand: #88ff9eff;
	--theme-brand-r: #c4ff4dff;
	--theme-gradient: linear-gradient(22.5deg, var(--theme-brand-l) -5%, var(--theme-brand-r) 105%);
	--theme-fg-0: #fff;
	--theme-bg-0: #202024;
	--theme-ol-0: #404044;
	--theme-bg-1: #28282c;
	--theme-ol-1: #48484c;
	--theme-bg-2: #303034;
	--theme-ol-2: #505054;
}

@media (prefers-color-scheme: light) {
	/*:root { }*/
}

/* elements */

h1,
h2,
h3 {
	margin: 6px 0 6px 0;
}

h1 {
	font-size: 36pt;
}

p,
li,
label {
	font-size: 12pt;
	margin: 6px 0 6px 0;
}

a,
a:visited {
}

/* reusable tags */

.serif {
	font-family: "Instrument Serif", "ITC Garamond", serif;
	font-weight: 400;
	line-height: 1;
}
p.serif,
li.serif,
label.serif {
	/*instrument is hard to read at 12pt*/
	font-size: 16pt;
}

.hfit,
.vfit {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	width: fit-content;
	height: fit-content;
}
.vfit {
	flex-direction: column;
}
.hfit {
	flex-direction: row;
}
.fstretch {
	align-items: stretch;
}
.fstart {
	align-items: flex-start;
}
.fend {
	align-items: flex-end;
}

.lh1 {
	line-height: 1;
}

.m0 {
	margin: 0;
}

.nosel {
	user-select: none;
	-webkit-user-select: none;
}

/* page layout */

body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: var(--theme-bg-0);
	color: var(--theme-fg-0);
}

body {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

header,
main,
footer {
	width: 100%;
	height: fit-content;
	display: flex;
	flex-flow: column nowrap;
}
main {
	flex: 1 0 auto;
}
footer {
	align-items: center;
	flex: 0 0 auto;
	height: fit-content;
	padding: 8px 8px 2px 8px;
	text-align: center;
}

header > nav {
	padding: 8px 12px 8px 12px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	height: fit-content;
	background-color: var(--theme-bg-0);
	border-bottom: solid 2px var(--theme-ol-0);
}