:root {
	--lightblue: #67b5ff;
	--lightgreen: #d2d5c1;
	--lightorange: #cd7c30;
	--midorange: #b4401c;
	--midbrown: #6c3b2c;
	--deepbrown: #610316;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	src: local("IBM Plex Mono"), local("IBMPlexMono"), url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
	
body {
	background-color: var(--lightgreen);
	color: var(--deepbrown);
	margin: 1% auto;
	font-family: "IBM Plex Mono", "Fira Code", "Courier New", monospace;
	font-size: large;
	max-width: 800px;
	text-align: "center";

}

h1 {
	align: "center";
}

p {
	text-align: "center";
}

.main-nav {
	display: flex;
	flex-wrap: wrap;
}

/*
.main-nav div {
	background-color: var(--lightorange);
	margin: 1em;
	padding: 1em;
}
*/

.cardbox {
	background-color: var(--midorange);
	color: var(--lightgreen);
}

div {
	background-color: var(--midbrown);
	color: var(--lightblue);
	padding: 0.5em;
	border: 0.5em;
	border-radius: 0.5em;
	box-shadow: 0.5em 0.5em 0.1px;
	margin: 1em auto 2em auto;
	text-align: center;
	/*white-space: pre;	*/
}




h3 {
	font-size: 16px;
}

table {
	text-align: center;
	border-spacing: 0.0em 3.0em 0.0em 3.0em;
	/*border: 1em solid var(--midgreen);*/
	border-collapse: collapse;
	/*padding: 5em;	*/
}

table td {
	border-left: 1px solid var(--midgreen);
	padding: 0em 0.5em;
}

table td:first-child {
	border-left: none;
}

table tr:hover {
	background-color: var(--midgreen);
}