/* 

 (                         *         (                                         
 )\ )                    (  `        )\ )                              )    )  
(()/(   (     )          )\))(      (()/(     (   (       )         ( /( ( /(  
 /(_)) ))\ ( /(   (     ((_)()\   (  /(_))   ))\  )(     (      (   )\()))\()) 
(_))  /((_))(_))  )\ )  (_()((_)  )\(_))_   /((_)(()\    )\  '  )\ (_))/(_))/  
/ __|(_)) ((_)_  _(_/(  |  \/  | ((_)|   \ (_))   ((_) _((_))  ((_)| |_ | |_   
\__ \/ -_)/ _` || ' \)) | |\/| |/ _| | |) |/ -_) | '_|| '  \()/ _ \|  _||  _|  
|___/\___|\__,_||_||_|  |_|  |_|\__| |___/ \___| |_|  |_|_|_| \___/ \__| \__|  

*/

/* css reset */

* {
	margin: 0;
	padding: 0;
	color: #000;
}


header {
	padding: 10px;
}

body {
	background-color: cyan;
	text-align: center;
}

h1 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 34px;
	color: red;
	text-align: center;
}

h2 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 28px;
	color: red;
	text-align: center;
}

h3 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 23px;
	color: red;
	text-align: center;
}

p {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 16px;
	color: red;
	text-align: center;
}

ul {
	list-style-type: none;
}

li {
	display: inline;
	background-color: limegreen;
	padding: 10px;
}

nav {
	width: 100%;
	height: 10%;
	padding: 10px;
}

head {
	width: 100%;
	height: 20%;
}




/* canvas */

main#canvas {
	width: 32.5vw;
	height: 41vw;
	margin: 5.6vh auto 0 auto;
}

/* HTML5 SEMANTIC TAGS */

section {
	width: 100%;
	float: left;
}

article {
	width: 81%;
	height: %;
	float: left;
	margin-top: 9%;
	margin-left: 9.5%;
}

figure {
	width: 97%;
	height: %;
	margin-top: 1.6%;
	margin-left: 1.5%;
	float: left;
}

/* color classes */ /* css pseudo-class hover states */

.yellow {
	background-color: #ffff00;
	height: 41.7%;
}
	.yellow:hover {
		background-color: #333399;
	}

.green {
	background-color: #99cc66;
	height: 65.5%;
}
	.green:hover {
		background-color: #ff9999;
	}

.orange {
	background-color: #ffcc00;
	height: 20.5%;
}
	.orange:hover {
		background-color: #333333;
	}

.red {
	background-color: #cc3300;
	height: 6%;
}
	.red:hover {
		background-color: #ff9999;
	}

.white {
	background-color: #cccccc;
	height: 41.8%;
}
	.white:hover {
		background-color: #333399;
	}

.pink {
	background-color: #ff9999;
	height: 65.5%;
}
	.pink:hover {
		background-color: #99cc66;
	}

.black {
	background-color: #333333;
	height: 20.5%;
}
	.black:hover {
		background-color: #ffcc00;
	}

.green2 {
	background-color: #cccc00;
	height: 3.3%;
}
	.green2:hover {
		background-color: #cc3300;
	}

.blue {
	background-color: #333399;
	height: 3.9%;
}
	.blue:hover {
		background-color: #333333;
	}