*{
	padding: 0;
	margin: 0;
}

main{
	width: 59vw;
	height: 39.3vw;
	margin: 3.3vw;
	margin-top: 3.3vw;
}

	section{
		width: 16.66666667%;
		height: 100%;
		float: left;
	}
		article{
			width: 60%;
			height: 80%;
			float: left;
			margin-top: 40%;
			margin-left: 20%;
		}
			figure{
				width: 16.5%;
				height: 97.4%;
				float: left;
				margin-top: 7%;
				margin-left: 7%;

			}

	.yellow{
		background-color: f9fc2f;
	}

	.black{
		background-color: 303231;
	}

	.red{
		background-color:ff555c;
	}

	.green{
		background-color: 33d460;
	}
	.purple{
		background-color:9d5c9e;
	}

	.cyan{
		background-color:b8d6f8;
	}

	.agreen{
		background-color: 00aeae;
	}

	.apurple{
		background-color: 9974d2;
	}


	.ayellow{
		background-color: fbfe30;
	}

	.ablue{
		background-color: 133bab;
	}

	.aorange{
		background-color: ff9e21;
	}

	.ared{
		background-color:fc4658;
	}

	.fred{
		background-color:fe6487;
	}
		.fred:hover{
		background-color:22d658;
		}

	.fblue{
		background-color:bfedfd;
	}
		.fblue:hover{
		background-color:feff28;
		}
	.forange{
		background-color:fe9e27;
	}
		.forange:hover{
		background-color:9974d2;
	}
	.fwhite{
		background-color:fde9f6;
	}
		.fwhite:hover{
		background-color:fffe2c;
		}
	.fblack{
		background-color:262721;
	}
		.fblack:hover{
		background-color:00aeae;
		}
	.fyellow{
		background-color:feff29;
	}
		.fyellow:hover{
		background-color:2ad65c;
	}