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

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

     main#canvas {
          height: 46.5vw;
          width: 39vw;
          margin: 2vh auto 0 auto;
          

     }

     section {
          width: 25%;
          height: 100%;
          float: left;

     }

     article {
          width: 100%;
          height: 4%;
     }

          article.slateblue {
               margin-top: 375%;
          }

          article.slateblue2 {
               margin-top: 275%;
          }

          article.violet {
               margin-top: 250%;
          }

          article.violet2 {
               margin-top: 400%;
          }

     figure {
          width: 100%;
          height: 5%;
     }
          figure.slateblue3 {
               margin-top: 300%;
          }

/* THE COLORS, THE COLORS */

     .red {
          background-color: darkred;
     }

     .palevioletred {
          background-color: palevioletred;
     }
          .palevioletred:hover {
               background-color: royalblue;
          }

     .slateblue {
          background-color: slateblue;
     }

          .slateblue:hover {
               background-color: palevioletred;
          }

     .slateblue2 {
          background-color: slateblue;
     }

     .slateblue3 {
          background-color: slateblue;
     }

     .royalblue {
          background-color: royalblue;
     }

          .royalblue:hover {
               background-color: violet;
          }

     .violet {
          background-color: orchid;
     }

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

     .violet2 {
          background-color: orchid;
     }