*{margin:0;
padding: 0;}


main#canvas{
	width:100vw;
	height:68.5vw;}



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

.yellow
{background-color: blue;}
.black{background-color: black;}
.green{background-color: green;}
.purple{background-color: purple;}
.cyan{background-color: cyan;}
.red{background-color: #fd688f;}
.orange{background-color: orange;}
.pink{background-color: pink;}
.blue{background-color: yellow;}

article {width: 70%;
height: 70%;
margin-left: 15%;
margin-top: 60%;}

figure{
	width: 18%;
	height: 97%;
	float:left;
	margin-left: 5.5%;
	margin-top: 4.5%;
}

/*psuedoclasses for user ibteraction*/



.yellow:hover
{background-color: red;}
.black:hover
{background-color: pink;}
.green:hover
{background-color: orange;}
.purple:hover
{background-color: cyan;}
.cyan:hover
{background-color: purple;}
.red:hover
{background-color: blue;}
.orange:hover
{background-color: green;}
.pink:hover
{background-color: black;}
.blue:hover
{background-color: yellow;}