:root {
	--gold-1: #796229;
	--gold-2: #8c753a;
	--gold-3: #aa904e;
	--gold-4: #c6ad6a;
	--gold-5: #edd496;
	--gold-special-a: #ebcb4e;
	--purple-1: #4a1b4f;
	--purple-2: #57275c;
	--purple-3: #6a346f;
	--purple-4: #7c4782;
	--purple-5: #96639b;
	--green-1: #1e5930;
	--green-2: #2b683d;
	--green-3: #397e4e;
	--green-4: #4f9363;
	--green-5: #6faf82;
	--green-special-a: #48e175;
}
@font-face {
	font-family: "maze";
	src:  url("/mazeletter-metropolis.woff2") format("woff2");
}
html, body {
	color: var(--gold-5);
	background-color: var(--gold-3);
	margin: 0;
	padding: 0;
	font-family: "lucida console", monospace;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: -3;
}
h1 {
	text-align: center;
}
h1, h2, h3 {
	font-weight: bold;
	text-shadow: 0.05em 0.03em 0.01em var(--gold-3);
}
a {
	text-decoration: none;
}
a:link, #draw-button {
	color: var(--gold-5);
	text-shadow: 0.02em 0.03em 0.01em var(--green-special-a)
}
a:visited {
	color: var(--gold-4);
}
a:hover, #draw-button:hover {
	color: var(--green-special-a);
}
a:active, #draw-button:active {
	color: lime;
}
#draw-button {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	margin: inherit;
	padding: inherit;
	text-align: center;
}
.indent-1 {
	padding-left: 2.5rem;
}
.indent-0 {
	padding-left: 1rem;
}
.porple {
	background-color: var(--purple-1);
	opacity: 0.77;
}
.maze {
	opacity: 0.5;
	position: fixed;
	display: block;
	margin-top: -0.3em;
	font-family: "maze", webdings;
	overflow: clip;
	white-space: nowrap;
	line-height: 1em;
	z-index: -1;
	color: var(--green-4);
	text-shadow: 1px 1px 0px var(--green-5);
}
.grid-wrapper {
	height: 100%;
	width: 100%;
	display: grid;
	position: relative;
}
.header {
	grid-area: header;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header h1 {
	margin: 0.1em;
	padding: 0;
	font-size: 4em;
}
@media (max-width: 360px) {
	.header h1 {
		font-size: 3em;
	}
}
.nav-side {
	grid-area: nav-side;
	overflow-y: auto;
}
.nav-side h3 {
	margin: 1rem 0 0 1rem;
}
.nav-side ul {
	list-style: None;
}
.nav-side li {
	margin-top: 1em;
}
.body {
	grid-area: body;
}
.body-bottom-left {
	grid-area: body-bottom-left;
}
.body, .body-bottom-left {
	position: relative;
	text-align: center;
	background-color: var(--green-1);
	z-index: -2;
}
.footer {
	grid-area: footer;
	padding: 1.2em;
	font-size: 0.8em;
	display: flex;
	justify-content: space-between;
}
@media (min-width: 580px) {
	.grid-wrapper {
		grid-template-areas:
		"header header"
		"nav-side body"
		"body-bottom-left body"
		"footer footer";
		grid-template-columns: min-content auto;
		grid-template-rows: minmax(min-content, max-content) auto minmax(auto, 90vh) minmax(max-content, auto);
	}
	.nav-side {
		margin-top: 0.3em;
	}
}
@media (max-width: 579px) {
	.hide-when-small {
		display: none
	}
	.grid-wrapper {
		width: 100%;
		display: grid;
		grid-template-areas:
			"header"
			"nav-side"
			"body"
			"footer";
		grid-template-rows: minmax(min-content, max-content) minmax(auto, max-content) minmax(10vw, auto) minmax(max-content, 2rem);
		grid-gap: 0.3em;
	}
	.body-bottom-left {
		display: none
	}
	.nav-side {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		padding: 1rem;		
	}
	.nav-side ul {
		padding: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.no-margin-top-when-small {
		margin-top: 0;
	}
	.nav-side h3 {
		margin: 1rem 0 0 0;
	}
}