{
	padding: 0;
	margin: 0;
}
body{
	background-color: black;
}

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

section{
	width: 16.6666667%;
	height: 100%;
	float: left;
}
	
	article{
		width: 60%;
		height:  80%;
		margin: auto;
		margin-top: 40%;
	}

		figure{
			width: 16.3%;
			height: 97.8%;
			margin:auto;
			float: left;
			margin-left: 7%;
			margin-top: 6%;

		}

.yellow{
	background-color: #fafe32;
}

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

.black{
	background-color: #2c2e2d;
}
	.black:hover {
		background-color:#f29928;
	}
	
.red{
	background-color: #fe535a;
}
	.red:hover {
		background-color:#9d7dd7;
	}

.green{
	background-color: #26d75b;
}

	.green:hover {
			background-color:#2c2e2d;
		}

.purple{
	background-color: #8d4a8d;
}

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

.cyan{
	background-color: #b5d5f8;
}

	.cyan:hover {
				background-color:#8d4a8d;
			}

.aqua-green{
	background-color: #08af9e;
}

.light-purple{
	background-color: #9d7dd7;
}

.blue{
	background-color: #3248b1;
}

.orange{
	background-color: #f29928;

}

	.orange:hover {
		;background-color:#8d4a8d;
}

.maroon-red{
	background-color: #f94144;
}

	.maroon-red:hover {
		;background-color:#8d4a8d;
}

.magenta{
	background-color: #fc6083;
}

	.magenta:hover {
		;background-color:#8d4a8d;
}

.light-blue{
	background-color: #c1ecfd;
}
	.light-blue:hover {
		;background-color:#fbeaf3;
}

.pink{
	background-color: #fbeaf3;
}

	.pink:hover {
		;background-color:#3248b1;
}