body {
	background-color: white;
}

body.squares a {
	display: block;
	float: left;
	}
	
nav {
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	}
	
ul {
	width: 100%;
}
	
ul li {
	width: 32%;
	text-align: center;
	display: block;
	float: left;
	}
	
ul li a {
	background-color: #326c98;
    font-size: .8em;
	font-family: 'Myriad Pro', Helvetica, sans-serif;
    color: white;
	text-decoration: none;
    text-transform: uppercase;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-weight: bold;
    line-height: 1.0em;
    letter-spacing: 1px;
    padding: .9em 1.9em .8em 1.9em;
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}

ul li a:after {
	content: ' »';
}

div {
	background-color: #a3d4fb;
	color: #164b76;
	text-align: center;
	margin: 7em auto;
	width: 100px;
	height: 100px;
	border: 4px solid #164b76;
	border-radius: .5em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: .8em;
	font-family: Verdana, Helvetica, sans-serif;
	text-transform: uppercase;
}

body.rotate {
	background-color: #4a652c;
}

section {
	text-align: center;
	margin-top: 7em;
	padding-bottom: 1.2em;
	background-image: url(../art/shadow.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

body.maze {
	background-color: #ccc;
}

.maze article {
	margin: 3em auto;
	width: 900px;
	height: 552px;
	padding: 4em 32px;
	background: white url(../art/maze.png) 50% 50% no-repeat;
	box-shadow: 0 0  13px rgba(0,0,0,.6);
}

#digdug {
	width: 60px;
}