/*
      ___         ___                                       ___     
     /\  \       /\  \         _____                       /\  \    
    /::\  \     /::\  \       /::\  \                     /::\  \   
   /:/\:\__\   /:/\:\  \     /:/\:\  \                   /:/\:\  \  
  /:/ /:/  /  /:/ /::\  \   /:/ /::\__\   ___     ___   /:/  \:\  \ 
 /:/_/:/  /  /:/_/:/\:\__\ /:/_/:/\:|__| /\  \   /\__\ /:/__/ \:\__\
 \:\/:/  /   \:\/:/  \/__/ \:\/:/ /:/  / \:\  \ /:/  / \:\  \ /:/  /
  \::/__/     \::/__/       \::/_/:/  /   \:\  /:/  /   \:\  /:/  / 
   \:\  \      \:\  \        \:\/:/  /     \:\/:/  /     \:\/:/  /  
    \:\__\      \:\__\        \::/  /       \::/  /       \::/  /   
     \/__/       \/__/         \/__/         \/__/         \/__/    

*/


/* CSS RESET */
* {
      margin: 0; 
      padding: 0;
      background-color: grey;
}
      

/* CANVAS*/

main#canvas {
      width: 104.1vw;
      height: 77.1vw;
      }



/* HTML5 SEMANTICS TAGS */

      section {
            width:  100%;
            height:  100%;
            

      }

            article.black-01 {
                  
                  width: 6.8%;
                  height: 100%;
                  margin-left: 4.4%;

            }

            article.black-02 {

                  width: 5%;
                  height: 78.8%;
                  margin-left: 11.2%;
                  margin-top: -100%;
            }
            article.black-03 {
                  width: 5%;
                  height: 56.2%;
                  margin-left: 16.2%;

            }

            article.black-04 {
                  width: 5%;
                  height: 135%;
                  margin-left: 21.2%;
                  margin-top: -100%;
                  
            }

            article.black-05 {
                  width: 4.9%;
                  height: 42.7%;
                  margin-left: 26.2%;
                  margin-top: -100%;
            }

            article.black-06 {
                  width: 4.9%;
                  height: 12.5%;
                  margin-left: 26.2%;
                  margin-top: 8.5%;
            }      

            article.black-07 {
                  width: 4.9%;
                  height: 12.5%;
                  margin-left: 26.2%;
                  margin-top: 8.9%;
            }
           
            article.black-08 {
                  width: 4.9%;
                  height: 31.9%;
                  margin-left: 26.2%;
                  margin-top: 8.8%;
            }



/* CSS COLOR CLASSES */


.beige {
      background-color: #eae7d4;
}
.black-01 {
      background-color: black;
}
.black-02 {
      background-color: black;
}
.black-03 {
      background-color: black;
}
.black-04 {
      background-color: black;
}
.black-05 {
      background-color: black;
}
.black-06 {
      background-color: black;
}
.black-07 {
      background-color: black;
}
.black-08 {
      background-color: black;
}

 
/* HOVER */
.black-01:hover{
      background-color: darkcyan;
}
.black-02:hover{
      background-color: darkcyan;
}
.black-03:hover{
      background-color: darkcyan;
}
.black-04:hover{
      background-color: darkcyan;
}
.black-05:hover{
      background-color: darkcyan;
}
.black-06:hover{
      background-color: darkcyan;
}
.black-07:hover{
      background-color: darkcyan;
}
.black-08:hover{
      background-color: darkcyan;
}