* {
    margin: 0;
    padding: 0;
}

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

    section {
        width: 16.666666666666667%;
        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;
    }