* {
	font-family: "Arial Black", Arial, sans-serif;
}

main {
	margin: auto;
	text-align: center;
	padding: var(--cell-width);
}

table {
	margin: auto;
	border-collapse: collapse;
	margin-bottom: var(--cell-width);
}

.upper {
	text-transform: uppercase;
}

h1 {
	max-width: max-content;
	margin: auto;
	padding: 0 1rem;
}

aside {
	font-size: 1.25rem;
}

.volume-page h1 {
	padding-bottom: 0;
	margin-bottom: 0;
	color: var(--purple);
}

:root {
	--cell-width: calc(calc(100vw) / 35);
	--cell-height: var(--cell-width);

	--yellow: #FFC000;
	--pink: #FBE4D5;
	--purple: #7030A0;
	--grey: #AEAAAA;
	--black: #000000;
}

td {
	border: none;
	width: var(--cell-width);
	height: var(--cell-height);
}

@media (max-width: 650px) {
	:root {
		--cell-height: calc(var(--cell-width) - 4px);
	}
}

.i-dot-colour {
	background-color: var(--yellow);
}

.i-body-colour {
	background-color: var(--pink);
}

.b-colour {
	background-color: var(--grey);
}

.b-bg-colour {
	background-color: var(--pink);
}

.o-negative-space-colour {
	background-color: var(--pink);
}

.o-bg-colour {
	background-color: var(--yellow);
}

.o-colour {
	background-color: var(--black);
}

.c-colour {
	background-color: var(--yellow);
}

.c-bg-colour {
	background-color: var(--pink);
}

ol {
	margin: 0;
	padding: 0;
	max-width: 500px;
	margin: auto;
}

li {
	display: inline-block;
}

a {
	font-weight: bold;
	color: var(--purple);
}

.links {
	max-width: 600px;
	margin: auto;
}

.volume-links {
	text-align: justify;
}

.puzzle-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	max-width: fit-content;
	margin: 2rem auto;
	min-width: 70vw;
}

.puzzle-links > a {
	/* flex-basis: 3%; */
	min-width: max-content;
	white-space: nowrap;
}