*{
	margin:  0;
	padding: 0;
	font-family: "Helvetica";
}



header#canvas {
	width:  78.2vw;
	height: 52vw;

}

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

article {
	width:  60%;
	height: 80%;
	float: left;
	margin-left: 20%;
	margin-top: 40%;
}

figure {
	width: 15%;
	height: 97.5%;
	float: left;
	margin-left: 8%;
	margin-top: 6%;
}

/*css named color classes */


.pink {
	background-color: peachpuff;
}	
	.pink:hover {background-color: palegoldenrod;
	}

.green {
	background-color: darkcyan;
}	
	.green:hover {background-color: darkmagenta;
	}
.red {
	background-color: tomato;
}
	.red:hover {background-color: peachpuff;
	}

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

.yellow {
	background-color: yellow;
}
	.yellow:hover {background-color: palevioletred;
	}
.cyan {
	background-color: powderblue;
}
	.cyan:hover {background-color: palegreen;
	}
.limegreen {
	background-color: limegreen;
}
	.limegreen:hover {background-color: coral;
	}
.blue {
	background-color: blue;
}
	.blue:hover {background-color: thistle;
	}
.purple {
	background-color: darkorchid;
}
	.purple:hover {background-color: seashell;
	}
.black {
	background-color: black;
}
	.black:hover {background-color: seagreen;
	}