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



header#canvas { 
	background-color: Gainsboro;
	width:  86.40vw;
	height: 100vw;

}

section {
	width: 92%;
	height: 90%;
	float: top;
	margin-left: 4.2%;


}

article {
	width:  97%;
	height: 97%;
	float: left;
	margin-left: 1.5%;
	margin-top: 5.5%;
}

figure {
	width: .932%;
	height: 100%;
	float: left;
	margin-left: 0%;
	
}

/*css named color classes */


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

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

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

.Gainsboro {
	background-color: Gainsboro;
}

.white {
	background-color: white;
}
	.white:hover {background-color: palegreen;
	}
.yellow {
	background-color: GoldenRod;
}
	.yellow:hover {background-color: forestgreen;
	}
.blue {
	background-color: CornflowerBlue;
}
	.blue:hover {background-color: thistle;
	}
.purple {
	background-color: darkorchid;
}
	.purple:hover {background-color: seashell;
	}
.black {
	background-color: black;
}
	.black:hover {background-color: seagreen;
	}