/*	        , - ~ ~ ~ - ,
	     ,'               ' ,
	   ,                       ,
	  ,                         ,    HELLO
	 , `’`’`’`’`’`’`’`’`’`’`’``  ,   WORLD
	 ,       @          @        ,
	 ,					  		 ,
	 ,                           ,
¤ø,¸¸,ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø,¸¸,ø¤ø,¸¸,ø¤
	   ,                       ,
	     ,                  , '
	       ' - , _ _ _ ,  '
				   |
				   |
				   |
				   |
				   |
				   |
  .·''·..·''·..·''·..·''·..·''·..·'.·''·.
				   |
				   |
				   |
				   |
				   |
				   |
				   |
				   |
				   |
				   |
			      / \
			     /   \
		  	    /	  \
	         __/	   \__
		    (__|	   |__) */

* {
	margin:0;
	padding:0;
}


header#canvas {
	width: 78vw;
	height: 52vw;
	margin: 2vw auto 0 auto;
}

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

article {
	width: 60%;
	height: 80%;
	margin-top: 41%;
	margin-left: 20%;
	float: left;
}

figure {
	width: 18%;
	height: 97%;
	margin-top: 8%;
	margin-left: 5.5%;
	float: left;
}

/* CSS NAMED COLOR CLASSES */

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

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

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

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

.darkorchid {
	background-color: darkorchid;
}
	.darkorchic:hover {
		background-color: black;
	}

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

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

.green {
	background-color: darkcyan;
}
	.green:hover {
			background-color: limegreen;
	}

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

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