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

header#canvas {
  width: 47vw;
  height: 33.8vw;
 margin: 2vw auto 0 auto;
}
section {
  width: 54%;
  height: 81%;
  flex-direction: row;
}
article {
  width: 100%;
  height: 60%; 
  margin-bottom: 50%;
}

figure {
  width: 100%;
  height: 30%;
 
margin-bottom: 50%;
}


.outer {background-color:#eef592;}
.outer > * {
  display:inline-block;
  vertical-align:middle;
  background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
.three {width:80px; height:100px;}






.yellow{
  background-color:#eef592 ;
}
.yellow:hover {
  background-color: hotpink;
}
.gray{
  background-color: #c6c7c9;
}
.gray:hover {
  background-color: lawngreen;
}
.red:hover {
  background-color: peachpuff;
}
.red{
  background-color: #e80100;
}
.white {
  background-color: #f1f1f1;
}
.red:hover {
  background-color:lightseagreen;
}