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

/* color classes */
.pink {
	background-color: #cf676a;
}

.blue {
	background-color: #68b3b8;
}

.orange {
	background-color: #d39a4c;
}

.black {
	background-color: #2f2a2d;
}

.white {
	background-color: #efeeea;
}

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

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

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

			.black:hover {
				background-color: red;
			}
				.white:hover {
					background-color: brown;
				}

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