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

header#canvas {
    display: inline-block;
    background-color: rgb(238, 233, 214);
        width: 97vw;
        height: 70vw;
        margin-top: 1.5%;
        margin-left: 1.3%;
    }

    section.black {
        display: inline-block;
        width: 26vw;
        height: 70vw;
        margin-left: 5%;
        margin-top: 0%;
    }

    figure.grey {
        display: inline-block;
        width: 4.7vw;
        height: 46%;
        margin-left: 11.37vw;
    }

    figure.greytwo {
        display: inline-block;
        width: 4.7vw;
        height: 54%;
        margin-left: 6.58vw;
        margin-top: -49.8%;
    }

    figcaption.grey {
        display: inline-block;
        width: 4.8vw;
        height: 9vw;
        margin-left: 210%;
        margin-top: 120%;
    }

    /*css color classes */

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

    .grey {
        background-color: rgb(238, 233, 214);
    }

    .greytwo {
        background-color: rgb(238, 233, 214);
    }
 /*css hover classes */

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

    .grey:hover {
        background-color: rgb(255, 23, 236);
    }

    .greytwo:hover {
        background-color: rgb(255, 23, 236);
    }