/* CSS RESET */
* {
	padding: 0;
	margin: 0;
	font-family: Helvetica;
}


main {
	width: 58vw;
	height: 38.7vw;
	background-color: black;
	margin: auto;
	margin-top: 3.7vw;
}

section {
	width: 16.666666%;
	height: 100%;
	float: left;
}

.yellow {
	background-color: yellow;
}

.black {
	background-color: black;
	margin: auto;
}

.red {
	background-color: tomato;
}

.green {
	background-color: #2ccb45;
}

.purple {
	background-color: #993ac7;
}

.cyan {
	background-color: #ade0e5;
}


article {
	margin-top: 40%;
	margin-left: 20%;
	width: 60%;
	height: 80%;
	float: left;
}

	.teal {
	background-color: #008b8b;
	}

	.a-purple {
	background-color: #9839c7;
	}

	.a-yellow {
	background-color: #fffd43;
	}

	.blue {
	background-color: #0026f8;
	}

	.orange {
	background-color: #ffa32c;
	}

	.a-red {
	background-color: #ff614c;
	}

figure {
	width: 16.666666%;
	height: 98%;
	float: left;
	margin-left: 6.5%;
	margin-top: 5%;
}
	.maroon {
		background-color: #ff624c;
	}
		.maroon:hover {
		background-color: #8ce9e6;
		}

	.lightblue {
		background-color: #ade0e6;
	}
		.lightblue:hover {
		background-color: #ff9c1c;
	}

	.warmorange {
		background-color: #ffa32c;
	}
		.warmorange:hover {
		background-color: #30bf52;
	}

	.beige {
		background-color: #ffdabc;
	}
		.beige:hover {
		background-color: #d647b3;
	}

	.smallblack {
		background-color: #000000;
	}
		.smallblack:hover {
		background-color: #dfffce;
	}

	.brightyellow{
		background-color: #fffd44;
	}
		.brightyellow:hover{
		background-color: #203aff;
	}