* {
	margin: 0;
	padding: 0;
}

body{
    padding-top: 10vh;
    background-color: antiquewhite;
}


main#canvas {
	width: 50.7vw;
	height: 52.4vw;
	padding-left: 45vh;
	padding-bottom: 20vh;
}

section,article {
	float: left;
}
	
		
	
		section.yellowgreen {
				width:39%;
				height:28%;
			}
		section.darkblue {
			width: 39%;
			height: 28%;
	}
		section.hotpink {
		width: 22%;
		height: 21.5%;
	}
		section.red-two {
			width: 22%;
			height: 21.5%;
			
		}
		section.darkblue-two {
			width: 24%;
			height: 36%;
			margin-top: -15.5%
		}
		section.red {
			width: 30%;
			height: 36%;
			margin-top: -15.5%
		}
		section.yellowgreen-two {
			width: 24%;
			height:21.5%;
			margin-top: -15.5%
		}
		section.hotpink-two {
			width: 24%;
			height:21.5%;
		}
		section.darkblue-three {
			width:22%;
			height:28.1%;
			margin-top: -6.8%
		}
		section.yellow {
			width: 30%;
			height: 36%;
			margin-top: -7.3%
			
		}
		section.yellowgreen-three {
			width:24%;
			height:36%;
			margin-top: -7.3%
		}
		section.red-three {
			width: 46%;
			height: 28.9%;
		}

/* CSS NAMED COLOR CLASSES */

.yellowgreen {
	background-color: yellowgreen;
}	
	.yellowgreen:hover {
		background-color: red;
	}

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

.hotpink {
	background-color: hotpink;
}
	.hotpink:hover {
		background-color: yellow;
	}
.darkblue {
	background-color: darkblue;
}
	.darkblue:hover {
		background-color: black;
	}
.yellow {
	background-color: yellow;
}
	.yellow:hover {
			background-color: darkblue;
		}
.red-two {
	background-color: red;
	}
	.red-two:hover {
		background-color: blue;
	}

.darkblue-two {
	background-color: darkblue;
}
	.darkblue-two:hover {
		background-color: black;
	}
.yellowgreen-two {
	background-color: yellowgreen;
}
	.yellowgreen-two:hover {
		background-color: red;
	}
.hotpink-two {
	background-color: hotpink;
}
	.hotpink-two:hover {
		background-color: yellow;
	}

.darkblue-three {
	background-color: darkblue;
}
	.darkblue-three:hover {
			background-color: black;
		}
.yellowgreen-three {
	background-color: yellowgreen;
}
	.yellowgreen-three:hover {
		background-color: pink;
	}
.red-three {
	background-color: red;
}
	.red-three:hover {
		background-color: blue;
	}