/* ***********************************************************************
**************************************************************************
*******_________________**************************************************
*******`***************,*******************************THIS PAGE WAS******
********`*************,**********************************MADE BY**********
*********`***********,***********************************LUISA!***********
**********|*********|*.___.********.___.**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|*****|****************************
**********|*********|*|***|********|***|****,|****************************
**********|*********|*|***|********|***|***,*|****************************
**********|*********|*|***|________|***|**,**|****************************
**********|*********|*`****************'*,***|****************************
**********|*********|*`_______________'*,****|****************************
*********,**********|******************,*****|****************************
********,***********|_________________,******|****************************
*******,*************************************|****************************
******,______________________________________|****************************
**************************************************************************
*********************************************************************** */
*{
    margin: 0;
    padding: 0;
}

/* nav bar for art forgery exercise*/
#nav-bar ul{
    font-size: 20pt;
    list-style-type: none;
    display: inline-block;
    margin: 0 0.5vw;
}

#nav-bar li{
    display: inline-block;
    margin: 0 0.5vw;
}



main#canvas {
    width: 78.2vw;
    height: 52vw;
    margin: 2vw auto 0 auto;
}

    section{
        width:  16.6666666%;
        height:  100%;
        float: left;
    }

        article{
            width: 60%;
            height: 80%;
            margin-left: 20%;
            margin-top: 40%;
        }

            figure{
                width: 15%;
                height: 97.5%;
                float: left;
                margin-left: 8%;
                margin-top: 6%;
            }
/* css named color classes */
.red{
    background-color: tomato;
}
    
    .red:hover{
    background-color: peachpuff;
    }

.pink{
    background-color: peachpuff;
}

    .pink:hover {
    background-color: tomato;
    }

.orange{
    background-color: orange;
}

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

.yellow{
    background-color: yellow;
}

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

.green{
    background-color: darkcyan;
}

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

.limegreen{
    background-color: limegreen;
}

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

.cyan{
    background-color: powderblue;
}

    .cyan:hover {
    background-color: blue;
    }

.blue{
    background-color: blue;
}

    .blue:hover {
    background-color: powderblue;
    }

.purple{
    background-color: darkorchid;
}

    .purple:hover {
    background-color: black;
    }

.black{
    background-color: black;
}

    .black:hover {
    background-color: darkorchid;
    }