/* general */

*{

        margin: 0;
        padding: 0;
      }

       body{

        background-color: white;

      }

    .center {

    margin: auto;
    width: 50%;


    }

      
      h3{
        font-family: sans-serif;
        font-size: 14pt;
        text-align: center;
        margin-bottom: 5%;
        margin-top: 5%;

      }

    

       .md_yellow{

        background-color: #e5d100;
      }

      .md_cyan{

        background-color: #48b7b0;
      }

      .md_purple{

        background-color: #231d3f;
      }


      .md_red{

        background-color: #eb2943;
      }


      .md_yellow:hover{

        background-color: #48b7b0;
      }

      .md_purple:hover{

        background-color: #e5d100;
      }

      .md_red:hover{

        background-color: #231d3f;
      }

      

      main#canvas{

      background-color: black;
      width: 45vw;
      height: 45vw;


      }

     section{

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

      }

      figure{

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