* {
    margin: 0;
    padding:0;
}

header#canvas {
  width: 100vw;
  height: 51vw;
}

main#padding {
  width: 100%;
  height: 98.6%;
  margin-top: 0.3%;
}

main {float: left;}
section,article, figure, figcaption {display: inline-block;}

/* CSS left */

  main.indigo {
    width: 49.95%;
    height: 99.9%;
    margin-top: 0.1%;

    }

    section.darkblue {
      width: 91.5%;
      height: 92.2%;
      margin-top:3.8%;
      margin-left: 3.8%;
    }

      article.blue {
        width: 91%;
        height: 90%;
        margin-top:5%;
        margin-left: 4.5%;
      }

        figure.darkgreen {
          width: 89%;
          height: 89%;
          margin-top:5.8%;
          margin-left: 5.8%;
        }

          figcaption.green {
            width: 88%;
            height: 87.5%;
            margin-top:7%;
            margin-left: 6%;
          }

            section.seagreen {
              width: 87.5%;
              height: 87%;
              margin-top:6%;
              margin-left: 6%;
            }

              article.yellow {
                width: 84.5%;
                height: 85%;
                margin-top:7.5%;
                margin-left: 7.5%;
              }

                figure.orange {
                  width: 81.5%;
                  height: 81%;
                  margin-top:9.51%;
                  margin-left: 9.5%;
                }

                  figcaption.darkorange {
                    width: 78%;
                    height: 78%;
                    margin-top:11%;
                    margin-left: 11%;
                  }

                    section.coral {
                      width: 71%;
                      height: 71%;
                      margin-top:14.5%;
                      margin-left: 14.5%;
                    }

                      article.crimson {
                        width: 59.5%;
                        height: 60%;
                        margin-top:20%;
                        margin-left: 21%;
                      }

                        figure.purple {
                          width: 32%;
                          height: 32%;
                          margin-top:34%;
                          margin-left: 34%;
                        }

 /* CSS right */

     main.purple-right {
       width: 49.95%;
       height: 99.9%;
       margin-top: 0.1%;
       }

        section.crimson-right {
          width: 92.5%;
          height: 92.5%;
          margin-top:3.8%;
          margin-left: 3.8%;
        }

          article.coral-right {
            width: 91%;
            height: 90%;
            margin-top:5%;
            margin-left: 4.5%;
          }

            figure.darkorange-right {
              width: 89%;
              height: 89%;
              margin-top:5.8%;
              margin-left: 5.8%;
            }

              figcaption.orange-right {
                width: 88%;
                height: 87.5%;
                margin-top:7%;
                margin-left: 6%;
              }

                section.yellow-right {
                  width: 87.5%;
                  height: 87%;
                  margin-top:6%;
                  margin-left: 6%;
                }

                  article.seagreen-right {
                    width: 84.5%;
                    height: 85%;
                    margin-top:7.5%;
                    margin-left: 7.5%;
                  }

                    figure.green-right {
                      width: 81.5%;
                      height: 81%;
                      margin-top:9.51%;
                      margin-left: 9.5%;
                    }

                      figcaption.darkgreen-right {
                        width: 78%;
                        height: 78%;
                        margin-top:11%;
                        margin-left: 11%;
                      }

                        section.blue-right {
                          width: 71%;
                          height: 71%;
                          margin-top:14.5%;
                          margin-left: 14.5%;
                        }

                          article.darkblue-right {
                            width: 59.5%;
                            height: 60%;
                            margin-top:20%;
                            margin-left: 21%;
                          }

                            figure.indigo-right {
                              width: 32%;
                              height: 32%;
                              margin-top:34%;
                              margin-left: 34%;
                            }


/* CSS color classes */

.black {
  background-color: black;
}

#padding{
  background-color: white;
}

.indigo {
  background-color: indigo;
}

.darkblue {
  background-color: darkblue;
}

.blue {
  background-color: blue;
}

.darkgreen {
  background-color: darkgreen;
}

.green {
  background-color: green;
}

.seagreen {
  background-color: seagreen;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.darkorange {
  background-color: darkorange;
}

.coral {
  background-color: coral;
}

.crimson {
  background-color: crimson;
}

.purple {
  background-color: purple;
}

/* CSS color classes right */

/*#padding{
  background-color: white;
}*/

.purple-right {
  background-color: purple;
}
.crimson-right {
  background-color: crimson;
}

.coral-right {
  background-color: coral;
}

.darkorange-right {
  background-color: darkorange;
}

.orange-right {
  background-color: orange;
}

.yellow-right {
  background-color: yellow;
}

.seagreen-right {
  background-color: seagreen;
}

.green-right {
  background-color: green;
}

.darkgreen-right {
  background-color: darkgreen;
}

.blue-right {
  background-color: blue;
}

.darkblue-right {
  background-color: darkblue;
}

.indigo-right {
  background-color: indigo;
}


/* CSS color hover classes */

.indigo:hover {
  background-color: purple;
}

.darkblue:hover {
  background-color: indigo;
}

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

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

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

.seagreen:hover {
  background-color: green;
}

.yellow:hover {
  background-color: seagreen;
}

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

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

.coral:hover {
  background-color: darkorange;
}

.crimson:hover {
  background-color: coral;
}

.purple:hover {
  background-color: crimson;
}

/* CSS color hover right classes */

.purple-right:hover {
  background-color: indigo;
}

.crimson-right:hover {
  background-color: purple;
}

.coral-right:hover {
  background-color: crimson;
}

.darkorange-right:hover {
  background-color: coral;
}

.orange-right:hover {
  background-color: darkorange;
}

.yellow-right:hover {
  background-color: orange;
}

.seagreen-right:hover {
  background-color: yellow;
}

.green-right:hover {
  background-color: seagreen;
}

.darkgreen-right:hover {
  background-color: green;
}

.blue-right:hover {
  background-color: darkgreen;
}

.darkblue-right:hover {
  background-color: blue;
}

.indigo-right:hover {
  background-color: darkblue;
}