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

* {
	margin: 0;
	padding: 0;
	
}

header#canvas {
	width: 76.25vw;
	height: 39vw;
	margin: 2vw auto 0 auto;
	background-color: snow;
}

section#one {
	width: 48.5%;
	height: 95%;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 0%;
	float: left;
}

section#two {
	width: 91%;
	height: 91%;
	margin-left: 4.5%;
	margin-top: 4.5%;
	float: left;
}

section#three {
	width: 91%;
	height: 91%;
	margin-left: 4.5%;
	margin-top: 4.5%;
	float: left;
}

section#four {
	width: 88%;
	height: 88%;
	margin-left: 5.5%;
	margin-top: 5.5%;
	float: left;
}

section#five {
	width: 88%;
	height: 88%;
	margin-left: 6%;
	margin-top: 6%;
	float: left;
}

section#six {
	width: 87%;
	height: 87%;
	margin-left: 6.8%;
	margin-top: 6.8%;
	float: left;
}

section#seven {
	width: 86%;
	height: 86%;
	margin-left: 8%;
	margin-top: 8%;
	float: left;
}

section#eight {
	width: 84%;
	height: 84%;
	margin-left: 8.5%;
	margin-top: 8.5%;
	float: left;
}

section#nine {
	width: 80%;
	height: 80%;
	margin-left: 10%;
	margin-top: 10%;
	float: left;
}

section#ten {
	width: 73%;
	height: 73%;
	margin-left: 13.5%;
	margin-top: 13.5%;
	float: left;
}

section#eleven {
	width: 60%;
	height: 60%;
	margin-left: 20%;
	margin-top: 20%;
	float: left;
}

section#twelve {
	width: 40%;
	height: 40%;
	margin-left: 30%;
	margin-top: 30%;
	float: left;
}

/* CSS NAMED COLOR CLASSES */

.crimson {
	background-color: crimson;
}
	.crimson:hover {
		background-color: white;
	}

.white {
	background-color: white;
}
	.white:hover {
		background-color: crimson;
	}

.blue {
	background-color: blue;
}

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

.purple {
	background-color: purple;
}

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

.orangered {
	background-color: orangered
}

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

.powderblue {
	background-color: powderblue;
}

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

.steelblue {
	background-color: steelblue;
}

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

.royalblue {
	background-color: royalblue;
}

	.royalblue:hover {
		background-color: gold;
	}

.gold {
	background-color: gold;
}

	.gold:hover {
		background-color: royalblue;
	}

.dodgerblue {
	background-color: dodgerblue;
}

	.dodgerblue:hover {
		background-color: green;
	}

.green {
	background-color: green;
}

	.green:hover {
		background-color: dodgerblue;
	}