* {
	margin: 0;
	padding: 0;
}
header#canvas {
	width: 35.3vw;
	height: 30.2vw;
	background-color: lightgray;
	position: fixed;
}
	section.yellow {
		width: 65.2%;
		height: 48.4%;
		margin-left: 16.7%;
		margin-top: 5%;
	}
		article.black {
			width: 75.7%;
			height: 80%;
			display: inline-block;
			margin-left: 11.7%;
			margin-top: 12.8%;
		}
			figure.red {
				width: 65.5%;
				height: 49%;
				
				margin-left: 18%;
				margin-top: 17%;
			}
			figure.yellow {
				width: 60%;
				height: 8.3%;
				margin-left: 20.4%;
				margin-top: -7.8%;
				margin-bottom: -13.2%;
			}

	section.firebrick {
		width: 65.2%;
		height: 38.4%;
		margin-left: 16.7%;
		
	}
		article.orange {
			width: 65%;
			height: 49%;
			display: inline-block;
			margin-left: 18%;
			margin-top: 13%;
		}
			figure.royalblue {
				width:96%;
				height: 16%;
				display: inline-block;
				margin-left: 2.1%;
				margin-top: 3%;
				margin-bottom: -2%;
			}

/* CSS NAMED COLOR CLASSES */

.lightgray {
	background-color: lightgray;
}

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

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

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

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

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

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