/*-----------'||\   /||`                                            
              ||\\.//||                  ''                         
              ||     ||   '''|.  '||''|  ||  `||''|,   '''|.  ('''' 
              ||     ||  .|''||   ||     ||   ||  ||  .|''||   `'') 
             .||     ||. `|..||. .||.   .||. .||  ||. `|..||. `...' 
                                                                            
                     
             '||'''|.                                   
              ||   ||               ''                  
              ||   || .|''|, (''''  ||  .|''|, `||''|, //////////// 
              ||   || ||..||  `'')  ||  ||  ||  ||  || ************ 
             .||...|' `|...  `...' .||. `|..|| .||  ||.////////////
                                            ||          
                                         `..|'--*/
/*--CSS RESET--*/

*{
    margin: 0;
    padding: 0;
}

body{
    padding-top: 20vh;
    background-color: antiquewhite;
}

/*--MAIN CANVAS--*/
main#canvas {
    background-color: #f7f4ed;
    width: 50vw;
    height: 50vw;
    margin:auto;

    }

#article1 {
background-color: black;
width: 50%;
height: 50%;
float: left;
margin-top: 0%;
margin-left: 0%;
}


#article2 {
background-color: pink;
width: 50%;
height: 50%;
float: left;
margin-top: 0%;
margin-left: 0%;
}


#article3 {
background-color: pink;
width: 50%;
height: 50%;
float: left;
margin-top: 0%;
margin-left: 0%;
}


#article4 {
    background-color:blue;
    width: 50%;
    height: 50%;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
}


    #figure1 {
        background-color: #ebe380;
        width: 50%;
        height: 50%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 0%;
        }

    #figure1:hover {
        background-color: #fffeee;
          }


     #figure2 {
        background-color: #6f79da;
        width: 50%;
        height: 50%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 0%;
        }

        #figure2:hover {
            background-color: #b6bdf5;
              }

        #figure3 {
            background-color: #2d5f60;
            width: 50%;
            height: 50%;
            float: left;
            margin-top: 0%;
            margin-left: 0%;
            margin-right: 0%;
            margin-bottom: 0%;
            }

        #figure3:hover {
                background-color: #6fc9ca;
                  }
    
         #figure4 {
            background-color: #fc691c;
            width: 50%;
            height: 50%;
            float: left;
            margin-top: 0%;
            margin-left: 0%;
            margin-right: 0%;
            margin-bottom: 0%;
            }

    #figure4:hover {
        background-color: #e9a581;
            }

  .orange {
  background-color: #fc691c;
  width: 25%;
  height: 25%;
  float: left;
  margin-top: 0%;
  margin-left: 0%;
  }

  .orange:hover {
    background-color: #e9a581;
        }

  .green {
    background-color: #2d5f60;
    width: 25%;
    height: 25%;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    }

    .green:hover {
        background-color: #6fc9ca;
            }

    .purple {
        background-color: #6f79da;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
        }

        .purple:hover {
            background-color: #b6bdf5;
                }

    .yellow {
        background-color: #ebe380;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
        }

    .yellow:hover {
        background-color: #fffeee;
        }


    .yellow1 {
        background-color: #dade03;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
           
            }

            .yellow1:hover {
                background-color: #f7f899;
                }
          
    .brown1 {
        background-color: #501a00;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
        }

        .brown1:hover {
            background-color: #cf6b39;
            }
          
    .blue1 {
        background-color: #2d253d;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
            }

    .blue1:hover {
    background-color: #a48dd1;
        }
          
    .red1 {
        background-color: #ce3201;
        width: 25%;
        height: 25%;
        float: left;
        margin-top: 0%;
        margin-left: 0%;
            }

            .red1:hover {
                background-color: #f0a48c;
                    }

/*--Captioin--*/

figcaption {
    width: 10vw;
    height:10vw;
    display: block;
    float:left;    
}