/*layout*/
* {
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 38vw;
	height: 40vw;
}

section{
	float: left;
	width: 2.38%;
	height: 100%;
	display: inline-block;
}



/*colors*/
.purple {
	background-color: #565968;
}

.black {
	background-color: #27262e;
}

.olive {
	background-color: #8a9c68;
}

.blue {
	background-color: #4875ea;
}

.burgundy {
	background-color: #6e272b;
}

.pink {
	background-color: #f6bfc2;
}

.green {
	background-color: #00784a;
}

.red {
	background-color: #de0824;
}

.yellow {
	background-color: #fdbc02;
}

.purple:hover {
	background-color: #FFFF00;
}

.black:hover {
	background-color: #FFFFFF;
}

.olive:hover {
	background-color: #D2B48C;
}

.blue:hover {
	background-color: #FFA500;
}

.burgundy:hover {
	background-color: #b2b2ff;
}

.pink:hover {
	background-color: #99cc99;
}

.green:hover {
	background-color: #FF0000;
}

.red:hover {
	background-color: #008000;
}

.yellow:hover {
	background-color: #800080;
}