* {
    margin: 0;
    padding:0;
}

header#canvas{
  width: 45.5vw;
  height: 46.2vw;
  padding-top: 0.7%;
  padding-left: 0.95%;
}

article {
  width: 96%;
  height: 99%;
  padding-left: 1.1%;
}

section {float: left; }

section.grey {
  width: 2.6%;
  height: 100%;
}

section.black {
  width: 2.35%;
  height: 100%;
}

section.limegreen {
  width: 2.2%;
  height: 100%;
}

section.blue {
  width: 2.2%;
  height: 100%;
}

section.maroon {
  width: 2.3%;
  height: 100%;
}

section.pink {
  width: 2.3%;
  height: 100%;
}


section.darkgreen {
  width: 2.3%;
  height: 100%;
}

section.red {
  width: 2.3%;
  height: 100%;
}

section.orange {
  width: 2.3%;
  height: 100%;
}




/* CSS color classes */

.silver {
  background-color: silver;
}

#padding {
  background-color: bisque;
}

.grey {
  background-color: grey;
}

.black {
  background-color: black;
}

.limegreen {
  background-color: limegreen;
}

.blue {
  background-color: blue;
}

.maroon {
  background-color: maroon;
}

.pink {
  background-color: pink;
}

.darkgreen {
  background-color: darkgreen;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

/* CSS color hover classes */

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

.black:hover {
  background-color: grey;
}

.limegreen:hover {
  background-color: black;
}

.blue:hover {
  background-color: limegreen;
}

.maroon:hover {
  background-color: skyblue;
}

.pink:hover {
  background-color: maroon;
}

.darkgreen:hover {
  background-color: pink;
}

.red:hover {
  background-color: darkgreen;
}

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