*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

header#canvas {
  width: 78vw;
  height: 52vw;
 margin: 2vw auto 0 auto;
}
section {
  width: 16.6666667%;
  height: 100%;
  float: left;
}
article {
  width: 65%;
  height: 80%;
  margin-left: 20%;
  margin-top: 40%;
  
}
figure {
  width: 13%;
  height: 97.5%;
  float: left;
  margin-bottom: 8%;
  margin: 6%;

}
/*CSS NAMED COLOR CLASSES */

.red {
  background-color:tomato;
}
  .red:hover {
    background-color: peachpuff;
  }
.pink{
  background-color: peachpuff;
}
.pink:hover {
  background-color: tomato;
}
.orange {
  background-color: orange;
}
.orange:hover {
  background-color: yellow;
}
.yellow {
  background-color: yellow;
}
.yellow:hover {
  background-color: orange;
}
.green {
  background-color: darkcyan;
}
.green:hover {
  background-color: limegreen;
}
.limegreen {
  background-color: limegreen
}
.limegreen:hover {
  background-color: darkcyan
}
.cyan {
  background-color:powderblue;
}
.cyan :hover {
  background-color:blue;
}
.blue {
  background-color: blue;
}
.blue :hover{
  background-color:powderblue;
}
.purple {
  background-color: darkorchid;
}
.purple:hover {
  background-color: black;
}
.black :hover{
  background-color: darkorchid;
}
.black {
  background-color:black;
}