@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: 15vw;
		height: 33vh;
		float: left;
	}

		figure {
		width: 4vw;
		height: 8vh;
		float: right;
		margin: 0;
	}

/* color classes */
.yellow {
	background-color: #ede47e;
}

.blue {
	background-color: #6c76d6;
}

.orange {
	background-color: #fb6619;
}

.teal {
	background-color: #2b5e60;
}

	.honey {
	background-color: #dbdf01;
		}
		.brown {
		background-color: #561f01;
		}
			.navy {
	background-color: #da3c05;
			}
				.doranges {
	background-color: #da3c05;
				}


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

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

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

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

	.honey:hover {
	background-color: white;
		}
		.brown:hover {
		background-color: green;
		}
			.navy:hover {
	background-color: blue;
			}
				.doranges:hover {
	background-color: yellow;
				}

/* 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;
}