/*
       .__                                            .__        
_____  |  |    ____   ______________  _______    _____|__| ____  
\__  \ |  |   / ___\_/ __ \_  __ \  \/ /\__  \  /  ___/  |/  _ \ 
 / __ \|  |__/ /_/  >  ___/|  | \/\   /  / __ \_\___ \|  (  <_> )
(____  /____/\___  / \___  >__|    \_/  (____  /____  >__|\____/ 
     \/     /_____/      \/                  \/     \/           
*/


* {
	margin: 0;
	padding:0;
}

header#canvas {
	width: 37.75vw;
	height: 27.5vw;
	margin: 2.5vw;
	margin-left: 3.8vw;
	background-color: gold;
}

	header#canvas:hover {
		width: 37.75vw;
		height: 27.5vw;
		margin: 2.5vw;
		margin-left: 3.8vw;
		background-color: navy;
	}

section {
	width: 100%;
	height: 10%;
	float: left;
	margin-top: 11%;
}

section#middle {
	width: 100%;
	height: 9.5%;
	float: left;
	margin-top: 7%;
}

section#last {
	width: 100%;
	height: 10%;
	float: left;
	margin-top: 33.35%;
}

figure {
	float: left;
} 
	

	/* CSS NAMED COLOR CLASSES:TOP ROW! */



.crimson-1 {
	background-color: crimson;
	width: 1.75%;
	height: 100%;
	margin-right: 1%;
}

	.crimson-1:hover {
		background-color: magenta;
		width: 1.75%;
		height: 100%;
		margin-right: 1%;
	}

.limegreen-1 {
	background-color: limegreen;
	width: 3.5%;
	height: 100%;
	margin-right: 1.25%	
}

	.limegreen-1:hover {
		background-color: lightskyblue;
		width: 3.5%;
		height: 100%;
		margin-right: 1.25%	
	}

.dodgerblue-1 {
	background-color: dodgerblue;
	width: .75%;
	height:100%;
	margin-right: 2.75%;
}

	.dodgerblue-1:hover {
		background-color: gold;
		width: .75%;
		height:100%;
		margin-right: 2.75%;
	}

.darkorange-1 {
	background-color: darkorange;
	width: 3.5%;
	height: 100%;
	margin-right: 2.5%;
}

	.darkorange-1:hover {
		background-color: greenyellow;
		width: 3.5%;
		height: 100%;
		margin-right: 2.5%;
	}

.thistle-1 {
	background-color: thistle;
	width: 8.15%;
	height: 100%;
	margin-right: 1%;
}

	.thistle-1:hover {
		background-color: yellow;
		width: 8.15%;
		height: 100%;
		margin-right: 1%;
	}

.green-1 {
	background-color: green;
	width: .95%;
	height: 100%;
	margin-right: 2.75%;
}

	.green-1:hover {
		background-color: maroon;
		width: .95%;
		height: 100%;
		margin-right: 2.75%;
	}

.rebeccapurple-1 {
	background-color: rebeccapurple;
	width: .95%;
	height: 100%;
	margin-right: .75%;
}

	.rebeccapurple-1:hover {
		background-color: coral;
		width: .95%;
		height: 100%;
		margin-right: .75%;
	}

.black-1 {
	background-color: black;
	width: 2%;
	height: 100%;
	margin-right: 2.75%;
}	

	.black-1:hover {
		background-color: white;
		width: 2%;
		height: 100%;
		margin-right: 2.75%;
	}

.lightpink-1 {
	background-color: lightpink;
	width: 2%;
	height: 100%;
	margin-right: 5.5%;
}

	.lightpink-1:hover {
		background-color: blue;
		width: 2%;
		height: 100%;
		margin-right: 5.5%;
	}

.darkorange-2 {
	background-color: darkorange;
	width: 4%;
	height: 100%;
	margin-right: 2.25%;
}

	.darkorange-2:hover {
		background-color: greenyellow;
		width: 4%;
		height: 100%;
		margin-right: 2.25%;
	}

.thistle-2 {
	background-color: thistle;
	width: 8.15%;
	height: 100%;
	margin-right: 2.35%;
}

	.thistle-2:hover {
		background-color: yellow;
		width: 8.15%;
		height: 100%;
		margin-right: 2.35%;
	}

.crimson-2 {
	background-color: crimson;
	width: 2.25%;
	height: 100%;
	margin-right: 6%;
}

	.crimson-2:hover {
		background-color: magenta;
		width: 2.25%;
		height: 100%;
		margin-right: 6%;
	}

.black-2 {
	background-color: black;
	width: 8.15%;
	height: 100%;
	margin-right: 6%;
}

	.black-2:hover {
		background-color: white;
		width: 8.15%;
		height: 100%;
		margin-right: 6%;
	}

.crimson-3 {
	background-color: crimson;
	width: 17%;
	height: 100%;
}

	.crimson-3:hover {
		background-color: magenta;
		width: 17%;
		height: 100%;
	}

/* CSS NAMED COLOR CLASSES:MIDDLE ROW! */

.lightpink-2 {
	background-color: lightpink;
	width: 6%;
	height: 100%;
	margin-right: 5%;

}

	.lightpink-2:hover {
		background-color: blue;
		width: 6%;
		height: 100%;
		margin-right: 5%;
	}

.black-3 {
	background-color: black;
	width: 14%;
	height: 100%;
	margin-right: 4.75%;
}

	.black-3:hover {
		background-color: white;
		width: 14%;
		height: 100%;
		margin-right: 4.75%;
	}

.crimson-4 {
	background-color: crimson;
	width: 3.75%;
	height: 100%;
	margin-right: 10%;
}

	.crimson-4:hover {
		background-color: magenta;
		width: 3.75%;
		height: 100%;
		margin-right: 10%;
	}

.darkorange-3 {
	background-color: darkorange;
	width: 14.5%;
	height: 100%;
	margin-right: 10%;
}

	.darkorange-3:hover {
		background-color: greenyellow;
		width: 14.5%;
		height: 100%;
		margin-right: 10%;
	}

.dodgerblue-2 {
	background-color: dodgerblue;
	width: 32%;
	height: 100%;
}

	.dodgerblue-2:hover {
		background-color: gold;
		width: 32%;
		height: 100%;
	}

/* CSS NAMED COLOR CLASSES:	LAST ROW! */

.limegreen-2 {
	background-color: limegreen;
	width: 25%;
	height: 100%;
	margin-right: 19%;
}

	.limegreen-2:hover {
		background-color: lightskyblue;
		width: 25%;
		height: 100%;
		margin-right: 19%;
	}

.black-4 {
	background-color: black;
	width: 56%;
	height: 100%;

}

	.black-4:hover {
		background-color: white;
		width: 56%;
		height: 100%;

	}