/*  GRDES66 Ascii logo "A tim"
      ___                    ___                       ___     
     /\  \                  /\  \          ___        /\__\    
    /::\  \                 \:\  \        /\  \      /::|  |   
   /:/\:\  \                 \:\  \       \:\  \    /:|:|  |   
  /::\~\:\  \                /::\  \      /::\__\  /:/|:|__|__ 
 /:/\:\ \:\__\              /:/\:\__\  __/:/\/__/ /:/ |::::\__\
 \/__\:\/:/  /             /:/  \/__/ /\/:/  /    \/__/~~/:/  /
      \::/  /             /:/  /      \::/__/           /:/  / 
      /:/  /              \/__/        \:\__\          /:/  /  
     /:/  /                             \/__/         /:/  /   
     \/__/                                            \/__/    
*/

     * {
          margin: 0;
          padding: 0;
          color: #000;
     }

     main#canvas {
          height: 40vw;
          width: 40vw;
          margin: 4vh auto 0 auto;
          background-color: linen  ;
     }

     section.yellow {
          width: 75%;
          height: 50%;
          margin-left: 12%;
          margin-right: 25%;
          margin-top: 7%;
          float: left;
     }

          article.black {
               width: 75%;
               height: 75%;
               margin-top: 20%;
               margin-bottom: 0;
               margin-left: 12.5%;
          }

               figure.red {
                    width: 65%;
                    height: 48%;
                    margin-top: 15%;
                    margin-left: 18%;
                    float: left;
               }

                    figcaption {
                         width: 94%;
                         height: 18%;
                         margin-left: 2.6%;
                         margin-top: 2.7%;
                         float: left;
                    }
     section.firebrick {
          width: 75%;
          height: 38%;
          margin-left: 12%;
          float: left;
     }

          article.orange {
               width: 62%;
               height: 49%;
               margin-left: 19%;
               margin-top: 12%;
               float: left;
          }

               figure.blue {
                    width: 95%;
                    height: 17%;
                    margin-left: 2.5%;
                    margin-top: 2.5%;
               }


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

          .red {
               background-color: red;
          }

          .black {
               background-color: black;
          }

          .orange {
               background-color: orange;
          }

          .blue {
               background-color: royalblue;
          }

               .blue:hover {
                    background-color: black;
               }
               
          .firebrick {
               background-color: firebrick;
          }
               .firebrick:hover {
                    background-color: darkcyan;
               }