/* ***********************************************************************
**************************************************************************
*******_________________**************************************************
*******`***************,*******************************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;
}

h3 {
    margin-top: 1vw;
}

header#canvas {
    width: 55.7vw;
    height:44.4vw ;
    margin-left:23vw;
    margin-top: 1.8vw;
}
    section.yellow {
        width: 36vw;
        height: 24.5vw;
        margin-left:9.7vw;
        
    }

    section.red {
        width: 36vw;
        height: 19.9vw;
        margin-left:9.7vw;
    
    }



    section.black {
        width: 26vw;
        height: 25vw;
        margin-left:5.5vw;
   
    }

        article.red {
        display: inline-block;
        width: 16.8vw ;
        height:7.4vw ;
        margin-top:8vw ;
        margin-left: .8vw;
        }

        figure#yellow-line {
            width:15.9vw;
            height:1.23vw;
            margin-left: .44vw;
            margin-top: .515vw;
        
        }
        
        figure.yellow {
            margin-top:;
            margin-bottom:.22vw;
        }
        
        article.orange{
            display: inline-block;
            width: 20.5vw ;
            height:7.5vw ;
            margin-top:3.9vw ;
            margin-left: 3vw;
        }
        
        figure#blue-line {
            width:19.5vw;
            height:1.23vw;
            margin-left: .58vw;
            margin-top: .515vw;
        }




/*CSS NAMED COLOR CLASSES */
.gray {
    background-color: gainsboro;

}

.yellow {
    background-color: yellow;
}

.red {
    background-color: crimson;
}

.black {
    background-color: black;
}
 

.orange{
    background-color: orange;
}

.blue{
    background-color: royalblue;
}



.yellow:hover{
    background-color:mediumorchid;

}


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


.red:hover{
    background-color: lightpink;
}

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

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

.gray:hover{
    background-color: greenyellow;
}