* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	font-family: monospace;
	background-color: black;
	color: white;
	overflow-x: hidden;
}

@keyframes huerot-filter {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}

@keyframes huerot-text {
	0% { color: red; }
	33% { color: green; }
	66% { color: blue; }
	100% {color: red; }
}

@keyframes huerot-border {
	0% { border-color: red; }
	33% { border-color: green; }
	66% { border-color: blue; }
	100% { border-color: red; }
}

header {
	width: calc(100vw - 10px);
	height: 200px;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

header > img {
	animation: linear huerot-filter 5s infinite;
	margin: auto;
	display: block;
}

header > nav {
	display: flex;
	justify-content: space-around;
	max-width: 720px;
	width: 100%;
	margin: auto;
}

header > nav > a {
	text-decoration: none;
	font-size: 120%;
	font-weight: bold;
	padding: 10px 0 10px 0;
	animation: linear huerot-text 5s infinite;
}

header > nav > a::before {
	content: '< ';
}

header > nav > a::after {
	content: ' >';
}

header > nav > a:hover::before {
	content: '> ';
}

header > nav > a:hover::after {
	content: ' <';
}

main {
	width: calc(100vw - 10px);
	margin: auto;
	min-height: calc(100vh - 200px);
	border-top: 2px solid red;
	border-left: 2px solid red;
	animation: linear huerot-border 5s infinite;
	padding: 10px;
}

main table th {
	text-align: left;
}

main table th[colspan="2"] {
	text-align: center;
}