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

header#canvas {
  width: 78vw;
  height: 52vw;
 margin: 2vw auto 0 auto;
}
section {
  width: 54%;
  height: 81%;
  float: left;
}
article {
  width: 39%;
  height: 28%;
  margin-left: 38%;
  
  
}
figure {
  width: 59.5%;
  height: 78%;
  float: left;
margin-left: 100%;
}
figure  {
  width: 59.5%;
  height: 78%;
  float: left;
}
  
  figure {
    width: 59.5%;
    height: 78%;
    float: left;
  margin-left: 100%;

}
figure {
  width: 59.5%;
  height: 78%;
  float: left;
margin-left: 100%;


}
.limegreen-top-left {
grid-area: limegreen-top-left;
  background-color: #99b828;
}
.blue-top-center{
grid-area:blue-top-center;
background-color: #001f7d;
}
.pink-top-right{
  grid-area:pink-top-center;
  background-color: #ff619c
}
.blue-second-left{
  grid-area:blue-second-left;
  background-color: #001f7d;
}
.hotorange-second-leftleft{
  grid-area: hotorange-second-leftleft;
  background-color: #f23625;
}
.limegreen-second-rightright{
  grid-area:limegreen-second-rightright;
  background-color: #99b828;
}
.hotorange-second-right{
  grid-area: hotorange-second-right;
  background-color: #f23625;
}
.yellow-last-left{
  grid-area: yellow-last-left;
  background-color: #f5d837;
}
.limegreen-last-leftleft{
  grid-area:limegreen-last-leftleft;
  background-color: #99b828;
}
.pink-last-rightright{
  grid-area: pink-last-rightright;
  background-color: #ff619c;
}
.blue-last-right{
  grid-area: blue-last-right;
  background-color: #001f7d;
}
.hotorange-bottomright{
  grid-area: hotorange-bottomright;
  background-color: #f23625;
}
/*CSS NAMED COLOR CLASSES */

.limegreen {
  background-color: #99b828;
}
.blue {
  background-color: #001f7d;
}
.pink{
  background-color: #ff619c;
}
.hotorange {
  background-color: #f23625;
}
.yellow {
  background-color: #f5d837;
}