*{
    margin: 0;
    padding: 0;
}

main#canvas{
    width: 45vw;
    height: 45vw;
}

main{
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
}

h1, h2{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #7692FF;
    text-align: center;
}

section{
    width: 11.25vw;
    height: 100%;
    float: left;
}

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

figure{
    width: 25%;
    height: 25%;
    float: left;
}



/*=--=-=-=- Color Class =-=-=-=--=--*/

.brown{
    background-color: #6A5837;
}

.red{
    background-color: #EB5160;
}

.orange{
    background-color: #FFAD69;
}

.ghost{
    background-color: #82A7A6;
}

.black{
    background-color: #071013;
}

.grey{
    background-color: #4D5061;
}

.frog{
    background-color: #D0E1AB;
}

.ocean{
    background-color: #2C666E;
}

.vanilla{
    background-color: #EDDEA4;
}

.cornflower{
    background-color: #7692FF;
}


/* Pseudo-class hover */

.brown:hover{
    background-color: #82A7A6;
}

.red:hover{
    background-color: #2C666E;
}

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

.ghost:hover{
    background-color:  #6A5837;
}

.black:hover{
    background-color: #FFAD69;
}

.grey:hover{
    background-color:#7692FF ;
}

.frog:hover{
    background-color: #4D5061;
}

.ocean:hover{
    background-color:   #EDDEA4;
}

.vanilla:hover{
    background-color: #EB5160;
}

.cornflower:hover{
    background-color:  #D0E1AB ;
}