* {
	paddind: 0;
	margin: 0;
	
}
header#canvas {
	width: 46vw;
	height: 46vw;
	background-color: gray;
	margin: 9.8vh auto;
}
section {
	float: left;
}
figure {
	float: left;
}

section.khaki {
	width:25%;
	height:25%;
}
section.blue {
	width:25%;
	height:25%;
}
section.green {
	width:25%;
	height:25%;
}
section.orange {
	width:25%;
	height:25%;
}
figure.khaki {
	width:25%;
	height:25%;
}
figure.blue {
	width:25%;
	height:25%;
}
figure.green {
	width:25%;
	height:25%;
}
figure.orange {
	width:25%;
	height:25%;
}
figure.yellow {
	width:25%;
	height:25%;
}
figure.maroon {
	width:25%;
	height:25%;
}
figure.navy {
	width:25%;
	height:25%;
}
figure.red {
	width:25%;
	height:25%;
}

/* css color classes */

.khaki  {
	background-color: #eae672;
}
.blue  {
	background-color: #6f78ba;
}
.green  {
	background-color: #0f5f5c;
}
.orange  {
	background-color: #f26122;
}
.yellow  {
	background-color: #d3db26;
}
.maroon  {
	background-color: #571d0b;
}
.navy  {
	background-color: #312543;
}
.red  {
	background-color: #e83025;
}

/* css hover states */

.khaki:hover  {
	background-color: #1cbfe5;	
}
.blue:hover  {
	background-color: #d61ce5;
}
.green:hover  {
	background-color: #1cbfe5;
}
.orange:hover  {
	background-color: #d61ce5;
}
.yellow:hover  {
	background-color: #1ce520;
}
.maroon:hover  {
	background-color: #a6e8aa;
}
.navy:hover  {
	background-color: #1ce520;
}
.red:hover  {
	background-color: #a6e8aa;
}