:root {
	--box-bg: #FFBED3;
	--box-border: #E16292;
	--border-subtle: #F98BBA;
	--text-subtle: #93335B;
	--text-a: #123382;
	--text-a-visited: #370C5B;
	--border-radius: 1em;
	--font-monospace: "Geist Mono", monospace;
	--font-sans-serif: sans-serif;
	--max-box-width: 1000px;
	--box-spacing: 1em;
}
html {
	font-size: 100%;
	scrollbar-gutter: stable; /* Not supported on Safari, but in my experience, Mac scrollbars are much friendlier than Windows scrollbars anyway. Also who uses Safari */
}
input, textarea, select {
	font: inherit;
	line-height: inherit;
}
* {
	box-sizing: border-box;
}
center {
	text-align: center;
	display: block;
}
body {
	background: #425977;
	margin: var(--box-spacing);
	font-size: 1.1em;
	min-height: calc(100vh - 1em);
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}
main, nav#main-nav {
	width: 100%;
	max-width: var(--max-box-width);
	margin-left: auto;
	margin-right: auto;
}
.outlined-box {
	background: var(--box-bg);
	border: 5px inset var(--box-border);
	border-radius: var(--border-radius);
	padding: 1em;
	margin-bottom: var(--box-spacing);
	box-shadow: -0.5em 0.5em #ABB9DB;
	width: 100%;
	height: max-content;
}
.outlined-box .outlined-box{ box-shadow: none; }
.outlined-box :first-child { margin-top: 0; }
.outlined-box :last-child { margin-bottom: 0; }
.side-box { width: 230px; }
.flex-row { display: flex; }
.flex-row > * + * { margin-left: var(--box-spacing); }
.flex-column {
	display: flex;
	flex-direction: column;
}

footer.outlined-box {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 1em;
	border-bottom: none;
	text-align: center;
	margin-bottom: 0;
	box-shadow: none;
	margin-top: auto;
}
.flatlist {
	padding: 0;
}
.flatlist > li {
	display: inline-block;
}
.flatlist > li + li::before {
	content: "|";
	margin: 0.5em;
	color: var(--text-subtle);
}
#navlist {
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}
a { color: var(--text-a); }
a:visited { color: var(--text-a-visited); }
a:hover { color: black; font-weight: bold; }

h1 { text-align: center; }
.side-box h2 { text-align: center; }
p, ul {
	margin-top: 0.5lh;
	margin-bottom: 1lh;
}
h2, h3, h4, h5, h6 {
	margin-top: 1.5em;
	margin-bottom: 0.5lh;
}
h1, h2 {
	border-bottom: 2px solid var(--border-subtle);
}
:is(h1,h2,h3,h4,h5,h6):before {
	color: var(--border-subtle);
	margin-right: 0.5ch;
}
hr {
	border: 1.75px inset var(--border-subtle);
}
h1:before { content: "#"; }
h2:before { content: "##"; }
h3:before { content: "###"; }
h4:before { content: "####"; }
h5:before { content: "#####"; }
h6:before { content: "######"; }
ul > li::marker {
	content: "*";
	font-weight: bold;
}
ul > li { padding-left: 0.5ch; }
input + label { margin-left: 0.5ch; }
input, select {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}
input[type="range"] {
	vertical-align: middle;
}
details summary {
	cursor: pointer;
	color: var(--faded-text);
	font-size: 0.9em;
	margin-bottom: 0.3em;
}
code {
	background: #FFF;
	border-radius: 0.5ch;
	padding: 0 0.5ch;
	color: var(--text-subtle);
	font-family: var(--font-monospace);
}
abbr:hover { cursor: help; }
math {
	font-size: 1.15em;
}
math.block {
	display: block;
	text-align: center;
}

#music { width: 100%; }
.return {
	display: inline-block;
	font-size: smaller;
	font-style: italic;
	margin-bottom: 0.5rem;
}