@charset "UTF-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

body{
	

}

main#canvas{
	width: 68.4vw;
	height: 45.5vw;
	margin: 0 auto;
}

section{
	width: 16.66666666666667%;
	height: 100%;
	float:left;
}
section.yellow{
	background-color: yellow;
}
section.black{
	background-color: black;

}
section.red{
    background-color: red;
}
section.green{
	background-color: green;
}
section.purple{
	background-color: purple;
}
section.cyan{
	background-color: cyan;
}

article{
	width: 60%;
	height: 80.2%;
	margin-top: 40%;
	margin-left: 20%;
	float: left;
}
article.green{
	background-color: green;

}
article.purple{
	background-color: purple;
}
article.yellow{
	background-color: yellow;
}
article.blue{
	background-color: blue;
}
article.orange{
	background-color: orange;
}
article.red{
	background-color: red;
}

figure{
	width: 17%;
	height: 97.8%;
	margin-top: 5.5%;
	margin-left: 6.4%;
	float: left;
}

figure.red{
	background-color: red;

}
figure.cyan{
	background-color: cyan;	
}
figure.yellow{
	background-color: yellow;	
}
figure.pink{
	background-color: pink;	
}
figure.black{
	background-color: black;	
}
figure.orange{
	background-color: orange;	
}

/* hover section */

section.yellow:hover{
	background-color: purple;
}
section.black:hover{
	background-color: orange;

}
section.red:hover{
    background-color: cyan;
}
section.green:hover{
	background-color: yellow;
}
section.purple:hover{
	background-color: red;
}
section.cyan:hover{
	background-color: black;
}

/* hover article */

article.green:hover{
	background-color: orange;

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

/* hover figure */

figure.red:hover{
	background-color: cyan;

}
figure.cyan:hover{
	background-color: red;	
}
figure.yellow:hover{
	background-color: pink;	
}
figure.pink:hover{
	background-color: yellow;	
}
figure.black:hover{
	background-color: orange;	
}
figure.orange:hover{
	background-color: black;	
}