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



header#canvas {
    width: 52.15vw;
    height: 52.2vw;
    margin: 2vh auto;
}

section,article,figcaption {
    float: left;
}

    article#row-one {
        width: 27.6%;
        height: 100%;
    }

        section.red {
            width: 100%;
            height: 64%;
            float: none;
        }

            figure#section-red {
                display: inline-block;
                margin: 28% 21%;
                width: 58%;
                height: 76%;
            }

            figcaption#red-section {
                margin-top: 6%;
                margin-left: 5%;
                width: 18.4%;
                height: 96%;
            }

        section.cyan {
            width: 233%;
            height: 36%;
        }

            figure.purple {
                margin: 10.5% 13.2%;
                width: 73.5%;
                height: 63%;
            }

                figcaption.orange {
                    margin-top: 2.5%;
                    margin-left: 2.5%;
                    width: 21.9%;
                    height: 90%;
                }

    section.yellow {
        width: 44.7%;
        height: 36%;
    }

        figure.black {
            margin: 13.8% 16.8%;
            width: 67.5%;
            height: 65%;
        }

            figcaption.blue {
                margin-top: 4%;
                margin-left: 4%;
                width: 20%;
                height: 90%;
            }

    section.blue {
        width: 27.7%;
        height: 36%;
    }

        figure.red {
            margin: 25% 20%;
            width: 62%;
            height: 61%;
        }

            figcaption.white {
                margin-top: 6%;
                margin-left: 5.5%;
                width: 18%;
                height: 92%;
            }

    article#row-two {
        width: 72.4%;
        height: 28%;
    }

        section.orange {
            width: 50.3%;
            height: 100%;
        }

            figure.green {
                margin: 17% 18.5%;
                width: 64%;
                height: 56%;
            }

                figcaption.yellow {
                    margin-top: 3%;
                    margin-left: 3%;
                    width: 21%;
                    height: 91%;
                }

        section.black {
            width: 49.7%;
            height: 229%;
        }

            figure.yellow {
                margin: 24.5% 19.5%;
                width: 61.5%;
                height: 72.8%;
            }

                figcaption.red {
                    margin-top: 5%;
                    margin-left: 5.5%;
                    width: 18%;
                    height: 95%;
                }

/* css named color classes */

.red {
    background-color: red;
}
.pink {
    background-color: pink;
}
.orange {
    background-color: orange;
}
.yellow {
    background-color: yellow;
}
.green {
    background-color: limegreen;
}
.cyan {
    background-color: cyan;
}
.blue {
    background-color: blue;
}
.purple {
    background-color: purple;
}
.black {
    background-color: black;
}
.white {
    background-color: white;
}

/* css color class hover states */
.red:hover {
    background-color: white;
}
.pink:hover {
    background-color: red;
}
.orange:hover {
    background-color: pink;
}
.yellow:hover {
    background-color: orange;
}
.green:hover {
    background-color: yellow;
}
.cyan:hover {
    background-color: limegreen;
}
.blue:hover {
    background-color: cyan;
}
.purple:hover {
    background-color: blue;
}
.black:hover {
    background-color: purple;
}
.white:hover {
    background-color: black;
}