* {
	margin: 0; 
	padding:0; 
}

header#canvas {
		width: 54.5vw;
		height:54.5vw;
		margin: 0 auto;	
}

section {
		width: 24.99%;
		height: 24.99%;
		float:left;

}

article {
		width:25%;
		height:25%;
		float:left; 
}

.lightyellow{
		background-color:#ece28b;
}

.lightyellow:hover {
		background-color:yellow;
}

.lightblue {
		background-color: #717dd1;
}

.lightblue:hover{
		background-color: navy; 
}

.green{
	background-color: #385f5e;
}

.green:hover {
		background-color:darkgreen;
}

.orange {
		background-color: #eb7035;
}

.orange:hover{
		background-color: darkorange; 
}

.smallorange{
		background-color:#eb7035;
}

.smallorange:hover{
	background-color:green;
}

.redorange{
	background-color: #ca4923;
}

.redorange:hover {
	background-color:darkorange;
}

.navyblue{
	background-color: #717dd1;
}

.navyblue:hover{
	background-color:navy;
}

.smallgreen {	
	background-color:#385f5e;
}

.smallgreen:hover{
	background-color:orange;
}

.smallblue{
		background-color:#717dd1;

}

.smallblue:hover{
	background-color: yellow;
}

.smallyellow {
	background-color: #ece28b;
}

.smallyellow:hover {
	background-color: blue;
}

.darkyellow {

	background-color: #dadb48;
}

.darkyellow:hover {

	background-color: lightblue ;
}

.brown {

	background-color: #4f2108 ;
}

.brown:hover {

	background-color:lightyellow ;
}

.purple {
 
	background-color:#2a2345;
}

.purple:hover {

	background-color: red;
}

.darkgreen {
	background-color:#385f5e;
}

.darkgreen:hover{
	background-color:darkgreen;
}