* {
	margin: 0;
	padding: 0;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

body {
	background-color: white;
}

#canvas {
	width: 50vw;
	height: 50vw;
	background-color: #f3f0e9;
	margin-left: 25vw;
	margin-top: 3em;
}

section {
	float: left;
	width: 25%;
	height: 25%;
}

figure {
	float: left;
	width: 25%;
	height: 25%;
}


.yellow {
	background-color: #efe782;
}

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

.blue {
	background-color: #707ad9;
}

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

.teal {
	background-color: #2b5f5d;
}

.teal:hover {
	background-color: DeepSkyBlue;
}

.orange {
	background-color: #fb681a;
}

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

.checkerboard {
	background-color: black;
}


.darkyellow {
	background-color: #dbe105;
}

.darkyellow:hover {
	background-color: DarkOliveGreen;
}

.darkred {
	background-color: #561d02;
}

.darkred:hover {
	background-color: Aquamarine;
}

.darkorange {
	background-color: #dc3f08;
}

.darkorange:hover {
	background-color: Cornsilk;
}

.darkblue {
	background-color: #2e2447;
}

.darkblue:hover {
	background-color: YellowGreen;
}



figcaption {
	margin-left: 25vw;
	margin-top: 1em;
	margin-bottom: 1em;
}