@charset "UTF-8";

/*                 
._ _._ _ _ | _.
|_(_| | (/_|(_|
|                */ 

body {
	background-color: #0000;
	color: #2a274a;
	font: normal 14px Verdana, sans-serif;
	display: table-cell;
  	vertical-align: middle;
}

html {
  display: table;
  margin: auto;
}

/* text */
h1 {
	font-family: georgia;
	text-align: center;
}

main#canvas {
	width: 88.6vw;
	height: 45.65vw;
	margin: 5.6vh auto 0 auto;
}

section {
	width: 36vw;
	height: 77vh;
	float: left;		
	}
		article {
	 		width: 25vw;
			height: 54vh;
			margin-top: 14%;
			margin-left: 20%;
			float: left	
		}

/* color classes */
.gray {
	background-color: #f1eee5;
}

.blue {
	background-color: #5487b2;
	width: 22vw;
	height: 53vh;
	margin-top: 19%;
	margin-left: 17.999%;
	float: left
}

.purple {
	background-color: #9a68a4;
	width: 14vw;
	height: 33vh;
	margin-top: 28%;
	margin-left: 17%;
	float: left
}

.red {
	background-color: #aa4443;
	width: 8.6vw;
	height: 20.5vh;
	margin-top: 27.5%;
	margin-left: 19.2%;
	float: left;
}

/* hovers */
.gray:hover {
	background-color: yellow;
}

	.blue:hover {
		background-color: pink;
	}

		.purple:hover {
			background-color: orange;
		}

			.red:hover {
				background-color: blue;
			}

/* lists */
ul {
	list-style-type: none;
	text-align: center;
}

li {
	display: inline-block;
	margin: 0;
	padding: 4px;
}

/* unvisited link */
a:link {
	color: #723534;
}

/* visited link */
a:visited {
	color: #723534;
}

/* mouse over link */
a:hover {
	color: #fdd4c4;
}

/* selected link */
a:active {
	color: #d17c79;
}