header {
}

.titles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.site-title {
	text-align: center;
	flex: 1 0;
}

.page-title {
	text-align: center;
	flex: 1 0;
}

nav.site {
	font-size: 1.125rem;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nav-link {
	flex: 1;
	text-align: center;
}

.title {
	text-align: center;
}

.tags {
	list-style: "✷";
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.tags > li {
	margin: 0 0.5rem;
}

article {
	margin: 0 auto;
	max-width: 50rem;
}

article > * {
	max-width: calc(min(50rem, 100%));
}

article > .highlight {
	margin: 0 auto;
	max-width: 40rem;
}

.center {
	text-align: center;
}

.alternatives {
	list-style: none;
	padding: 0;
}

.alternatives > li {
	display: inline-block;
}

.links {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.entry {
	flex: 1 0 auto;
	max-width: 20rem;
	padding: 0.5rem 0;
	margin: 0 0.5rem;
	text-align: justify;
}

.dates {
	padding: 2rem 0 0 0;
	display: flex;
	justify-content: space-around;
}

@media(min-width: 60rem) {
	.page {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	article {
		width: calc(min(70vw,60rem));
	}
	.before {
		min-width: 15rem;
		max-width: 25vw;
	}
	.before > .tags {
		justify-content: left;
	}
	.before > #TableOfContents {
		top: 0;
		padding-right: 1rem;
		position: sticky;
		overflow-y: auto;
		box-sizing: border-box;
		max-height: 100vh;
	}
}

footer {
	text-align: center;
	padding: 0.5rem;
	font-size: 0.875rem;
}

span.date {
	display: block;
}

p.attribution {
	text-align: right;
}

.walk {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 0 2em;
	list-style: none;
}

.walk > li {
	min-width: 20em;
	max-width: 20em;
	text-align: center;
}

#TableOfContents > ol {
	list-style-type: decimal;
}
#TableOfContents > ol > li > ol {
	list-style-type: lower-alpha;
}
#TableOfContents > ol > li > ol > li > ol {
	list-style-type: lower-roman;
}

table {
	margin: 0 auto;
	min-width: 100%;
	border-collapse: collapse;
}

tr {
	border: none;
}

th, td {
	padding: 0 0.25rem;
}

thead > tr {
	background-color: var(--table-background-even);
}
thead > tr > th:nth-child(odd) {
	background-color: var(--table-background-both);
}
tbody > tr:nth-child(odd) {
	background-color: var(--table-background-odd);
}
tbody > tr:nth-child(odd) > td:nth-child(even) {
	background-color: var(--table-background-both);
}
tbody > tr:nth-child(even) {
	background-color: var(--table-background-even);
}
tbody > tr:nth-child(even) > td:nth-child(odd) {
	background-color: var(--table-background-both);
}

h1 {
	padding: 0.5rem 0 0 0;
	font-size: 1.5rem;
}

h2 {
	padding: 0.5rem 0 0 0;
	font-size: 1.375rem;
}

h3 {
	padding: 0.5rem 0 0 0;
	font-size: 1.25rem;
}

h4 {
	padding: 0.5rem 0 0 0;
	font-size: 1.125rem;
}

h5 {
	padding: 0.5rem 0 0 0;
	font-size: 1rem;
}

p {
	font-size: 1rem;
}

h6 {
	padding: 0.5rem 0 0 0;
	font-size: 0.875rem;
}

header a, .before a {
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		--table-border: #808080;
		--table-background-both: #200028;
		--table-background-odd: #000038;
		--table-background-even: #280000;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--table-border: #808080;
		--table-background-both: #dfffd7;
		--table-background-odd: #ffffc7;
		--table-background-even: #d7ffff;
	};
}