:root {
	--bg-color: #F2C0C0;
	--fg-color: #2C2424;
	--body-text-color: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #2C2424;
		--fg-color: #F2C0C0;
		--body-text-color: white;
	}
}

body {
	display: flex;
	flex-wrap: wrap;
	font-family: monospace;
	margin: 0;
	background-color: var(--bg-color);
	color: var(--body-text-color);
}
body > nav {
	flex-basis: content;
	padding-right: 1vw;
	min-width: 16em;
}

header {
	flex-basis: 100%;
	flex-shrink: 0;
	background-color: var(--fg-color);
}
header nav,h1 {
	padding-left: 1%;
	flex-basis: 100%;
}
header nav {
	display: flex;
	justify-content: space-between;
	border-bottom: dashed;
	border-bottom-color: var(--bg-color);
	border-bottom-width: 1px;
}
header nav div span::after {
	content: "☷";
	color: var(--bg-color);
	padding: 0 1em;
}
header nav div span:last-child::after {
	content: "";
}
header a, header div {
	text-decoration: none;
	color: var(--bg-color);
}
header h1 {
	margin: 1vh 0 1vh;
}
header h1 span {
	margin-left: 1em;
	font-size: 50%;
	font-style: italic;
}

a {
	color: var(--fg-color);
}

nav a { text-decoration: none; color: inherit; }

nav ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0; }
nav li ul { padding: 0 0.6em; }
nav#side-bar { padding-left: 1em; }
nav#side-bar div ul li ul { border: solid; border-color: var(--fg-color); border-width: 1px; }
nav#side-bar div ul li ul li ul { border: none; }
nav#side-bar div ul li ul li { border-bottom: dotted; border-color: var(--fg-color); border-width: 1px; }
nav#side-bar div ul li ul li:last-child { border-bottom: none; }

article { flex-basis: 60%; padding-left: 1em; }
article ul.dir-list { display: flex; justify-content: space-around; }

footer { flex-basis: 100%; flex-shrink: 0; }
footer { display: flex; justify-content: space-between; border-top: dashed; border-top-color: var(--fg-color); border-top-width: 1px; }
footer div { padding: 1em; }