$yellow: #E5B217;
$red: #80181A;

html, body, table {
	height: 100%;
	padding: 0;
	margin: 0;

	background-color: $red;
	color: $yellow;

	font-family: sans-serif;
	font-weight: bolder;
}

table {
	width: 100%;
	border-collapse: collapse;
	td, th {
		border: solid 1px $yellow;
	}
	td {
		text-align: center;
		vertical-align: middle;
	}

	thead {
		height: 10%;
		background-color: $yellow;
		color: $red;
	}
	tbody {
		td {
			width: 33%;
			height: 30%;
			div {
				/* A wrapper round cell contents allowing us to use fancy
				   table-positioning inside of the cell */
				display: table;
				width: 100%;
				height: 100%;
				a {
					display: table-cell;
					height: 100%;
					width: 100%;
					vertical-align: middle;
				}
			}
		}
	}
}

a {
	text-decoration: none;
	color: $yellow;
	&:hover, &:active, &:focus {
		text-decoration: underline;
		background-color: $yellow;
		color: $red;
	}
}