* {
	margin: 0;
	padding: 0;
	
}

header#canvas {
	width: 64vw;
	height: 72.3vw; 
	/*margin: 2vw auto 0 auto ;*/
}

	section#top {
		width: 100%;
		height:  55.5%;
		float: left;
	}

		article#blackbox {
			display: inline-block; /* the parent tends to inherit the margin. inline-block takes care of it */
			width: 75.8%;
			height: 80.3%;
			margin-top: 12.5%; /* when article margin was added, the canvas moves with it, and I can't figure out why. */
			margin-left: 11.6%;

		}
			figure#topredbox {
				width: 66%;
				height:  48.89%;
				float: left;
				margin-left: 16.9%;
				margin-top: 17%;
			}
				figcaption {
					width: 94.3%;
					height: 16.7%;
					margin-top: 2.9%;
					margin-left: 2.9%;
					margin-bottom: 3.5%;
				}

	section#bottom {
		width: 100%;
		height:  44.5%;
		float: left;
	}

		article#orangebox {
			width: 62.45%;
			height:  49.6%;
			float: left;
			margin-left: 18.5%;
			margin-top: 13.1%;
		}
			.blue {
				width: 95.3%;
				height: 16.7%;
				margin-top: 2.27%;
				margin-left: 2.3%;
				margin-bottom: 2.8%;
			}

/* CSS NAMED COLOR CLASS */

.yellow {
	background-color: #f9fd24;
}
	.yellow:hover {
		background-color: #282728;
	}
	
.black {
	background-color: #282728;
}
	.black:hover {
		background-color: #ba0e25;
	}

.red {
	background-color: #ba0e25;
}
	.red:hover {
		background-color: #f7a624;
		}

.orange {
	background-color: #f7a624;
}
	.orange:hover {
		background-color: #506ac4;
	}

.blue {
	background-color: #506ac4;
}
	.blue:hover {
		background-color: #f9fd24;
		}