* {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    }

    header#canvas {
    background-color: rgb(218, 216, 212);
        width: 69vw;
        height: 69vw;
        margin: auto;
    }

    section.purple {
        display: inline-block;
        width: 67vw;
        height: 67.5vw;
        margin-top: 1%;
        margin-left: 2%;
    }

    figure.red {
        display: inline-block;
        width: 34vw;
        height: 59.633vw;
        margin-left: 11%;
        margin-top: 11.7%;
    }

    figcaption.red {
        display: inline-block;
        width: 4.5vw;
        height: 10vw;
        margin-left: -200%;
        margin-top: -80%;
    }

    figcaption.redtwo {
        display: inline-block;
        width: 10vw;
        height: 10vw;
        margin-left: 0%;
        margin-top: 0%;
    }
    figcaption#redhook-section {
        display: inline-block;
        width: 8.5vw;
        height: 8.5vw;
        margin-left: 0%;
        margin-top: -18%;
    }
    figcaption#redbase-section {
        display: inline-block;
        width: 4.3vw;
        height: 16vw;
        margin-left: 0%;
        margin-top: 144%;
    }
    figcaption.purple {
        display: inline-block;
        width: 12.5vw;
        height: 34vw;
        margin-left: 0%;
        margin-top: 0%;
    }

    figcaption.black {
        display: inline-block;
        width: 8.2vw;
        height: 8.3vw;
        margin-bottom: -48.4%;
        margin-left: -25.3%;
    }

    figure.green {
        display: inline-block;
        width: 25.65vw;
        height: 25.2vw;
        margin-top: 1.2%;
        margin-left: 100%;
    }

    figcaption.blue {
        display: inline-block;
        width: 8.5vw;
        height: 8.5vw;
        margin-top: 33%;
        margin-left: 33%;
    }

    figcaption.bluetwo {
        display: inline-block;
        width: 8.7vw;
        height: 4vw;
        margin-top: 00%;
        margin-left: 99%;
    }

    /*css color classes */

    .purple {
        background-color: rgb(169, 132, 204);;
    }

    .red {
        background-color: rgb(252, 63, 79);
    }

    .redtwo {
        background-color: rgb(137, 102, 151);
    }

    .black {
        background-color: rgb(0, 0, 0);
    }

    .green {
        background-color: rgb(23, 161, 85);
    }

    .blue {
        background-color: rgb(70, 167, 206);
    }

    .bluetwo {
        background-color: rgb(70, 167, 206);
    }

    .purple:hover {
        background-color: rgb(234, 245, 77);;
    }

    .red:hover {
        background-color: rgb(36, 167, 105);
    }

    .redtwo:hover {
        background-color: rgb(36, 167, 105);
    }

    .black:hover {
        background-color: rgb(255, 255, 255);
    }

    .green:hover {
        background-color: rgb(61, 63, 212);
    }

    .blue:hover {
        background-color: rgb(223, 73, 148);
    }

    .bluetwo:hover {
        background-color: rgb(223, 73, 148);
    }