/* ***********************************************************************
**************************************************************************
*******_________________**************************************************
*******`***************,*******************************THIS PAGE WAS******
********`*************,**********************************MADE BY**********
*********`***********,***********************************LUISA!***********
**********|*********|*.___.********.___.**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|**********************************
**********|*********|*|***|********|***|*****|****************************
**********|*********|*|***|********|***|****,|****************************
**********|*********|*|***|********|***|***,*|****************************
**********|*********|*|***|________|***|**,**|****************************
**********|*********|*`****************'*,***|****************************
**********|*********|*`_______________'*,****|****************************
*********,**********|******************,*****|****************************
********,***********|_________________,******|****************************
*******,*************************************|****************************
******,______________________________________|****************************
**************************************************************************
*********************************************************************** */

/* 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: 40vw;
    height: 50.5vw;
    margin: auto;
    }

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

/* css color classes*/
.purple {
    background-color: #866fa1;
}

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

.orange {
    background-color: #f7ab4f;
}

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

.blue {
    background-color: #5086b3;
}

    .blue:hover {
        background-color: #F0E68C;
    }

.darkgreen {
    background-color: #00AC75;
}

    .darkgreen:hover {
        background-color: #A3C52E;
    }

.paleblue {
    background-color: #87CEEB;
}

    .paleblue:hover {
        background-color: #DDA0DD;
    }

.orange {
    background-color: #F88002;
}

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

.lightskyblue {
    background-color: #47BBBF;
}

    .lightskyblue:hover {
        background-color: #00AC75;
    }

.lightgreen {
    background-color: #A3C52E;
}

    .lightgreen:hover {
        background-color: #f7a854;
    }

.mustard {
    background-color: #FEB300;
}

    .mustard:hover {
        background-color: #DF66A1;
    }