/* 

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

*/

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


/* color classes */

.tomato {
	background-color: tomato;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.limegreen {
	background-color: limegreen;
}

.powderblue {
	background-color: powderblue;
}

.blue {
	background-color: blue;
}

.darkcyan {
	background-color: darkcyan;
}

.darkorchid {
	background-color: darkorchid;
}

.peachpuff {
	background-color: peachpuff;
}

.black {
	background-color: black;
}

/* canvas */

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

/* HTML5 SEMANTIC TAGS */

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

article {
	width: 60%;
	height: 80.2%;
	margin-top: 40%;
	margin-left: 20%;
}

figure {
	width: 17%;
	height: 97.8%;
	margin-top: 5.5%;
	margin-left: 6.4%;
	float: left;
}

/* css pseudo-class hover states */

.yellow:hover {
	background-color: tomato;
}

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

.tomato:hover {
	background-color: yellow;
}

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

.darkorchid:hover {
	background-color: darkcyan;
}

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

.darkcyan:hover {
	background-color: darkorchid;
}

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

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

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