/*
 * Skeleton
 */

@font-face {
	font-family: "Pacifico";
	src: url("../fonts/Pacifico.woff2") format("woff2"),
	url("../fonts/Pacifico.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Verdana";
	src: url("../fonts/Verdana.woff2") format("woff2"),
	url("../fonts/Verdana.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

/* NOTE: on mobile "vh" does not take into account the address bar. "%" does. */
body {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;

	display: grid;
	grid-template-rows: auto auto auto auto 1fr auto;
	grid-template-columns: auto 1fr auto;

	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 10px;
	line-height: 1.2em;

	border: .5em solid gold;
	box-sizing: border-box;
	padding: 0;
	height: 100%;
	background-color: #4c2323;
	color: #ffffff;
}

div {
	position: relative;
}

h2 {
	font-size: 1.5em;
	margin: 0.5em 0;
}

p {
	margin: 1em 0;
}

canvas {
	border: 1px solid #fff;
}

img {
	border: 1px solid #fff;
}

br {
	clear: both;
}

a {
	color: #64ADFF;
}

button {
	font-size: 1em; /* keep, button has browser defined style */
	line-height: 1.2em; /* keep, button has browser defined style */
	border-radius: 1.2em;
	border-width: 0;
	cursor: pointer;
	padding: 0.5em 1.8em;
	white-space: nowrap;
	margin: 0.5em;
}

textarea {
	font-size: 1em;
}

hr {
	border: 2px solid black;
	width: 99%;
	clear: both;
}

.head {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.menu {
	grid-row: 2;
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.5em 0 1em 0;
}

.announcement {
	grid-row: 3;
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 0.5em 0;
}

.announcement p {
	margin: 0 2em;
}

.message {
	grid-row: 4;
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main {
	grid-row: 5;
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;

	/* new colours */
	background-color: #6a2d2d;
	border-top: 5px double #536168;
	border-bottom: 5px double #536168;
}

.foot {
	grid-row: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.left {
	grid-column: 1;
}

.middle {
	grid-column: 2;
}

.right {
	grid-column: 3;
}

/*
 * Header/footer
 */
.head img,
.foot img {
	/* don't forget to update the setfontsize() code */
	width: 10em;
	height: 10em;
	border: none;
}

/* new colours */
.head img,
.foot img {
	width: 9em;
	height: 9em;
	margin: 0.5em;
}

.head1 {
	font-family: Pacifico;
	font-size: 4em;
	line-height: 1em;
	text-align: center;
	font-weight: bold;
	margin: .1em 0 .3em 0;
}

.head2 {
	/* don't forget to update the setfontsize() code */
	font-size: 1.125em;
	line-height: 1em;
	text-align: center;
	font-style: italic;
	font-weight: normal;
	margin: 0.5em 0;
	padding: 0;
}

#system-message-container {
	width: 80%;
}

/*
 * Navigation
 */

.menu {
	text-align: center;
}

.menu ul {
	list-style-type: none;
	padding-inline-start: 0;
	margin: 0;
}

.menu ul li {
	display: inline;
	margin: 0 0.625em;
}

.menu ul li a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s;
	background-color: #f0f0f0; /* moved from .menu */
	padding: 0.5em 1em; /* adds padding around the menu items */
}

.menu ul li.active a {
	color: #007BFF;
	background-color: #e0e0e0;
}

.menu ul li a:hover {
	color: #007BFF;
	background-color: #e0e0e0; /* slightly darken the background on hover */
}

/*
 * Main contents
 */

#wrapperOuter {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;

	overflow: auto;
}

#wrapperInner {
	width: 30em;
	margin-left: auto;
	margin-right: auto;
}