/* * {
    margin: 0;
    padding: 0;
} */

main#canvas {
    width: 50vw;
    height: 50vw;
    margin: auto;
    background-color: grey;
    }

    section {
        width: 25%;
        height: 25%;
        float: left;
    }

    article {
        width: 25%;
        height: 25%;
        float: left;
    }

/* css color classes*/

.mustard {
    background-color: #E3DB58;
}

    .mustard:hover {
        background-color: #7490EA;
    }

.orange {
    background-color: #FFA710;
}

    .orange:hover {
        background-color: #F76F11;
    }

.darkgreen {
    background-color: #4A8445;
}

    .darkgreen:hover {
        background-color: #FFA710;
    }

.yellow {
    background-color: #E5E907;
}

    .yellow:hover {
        background-color: #2B0B21;
    }

.red {
    background-color: #F76F11;
}

    .red:hover {
        background-color: #C6C4B7;
    }

.black {
    background-color: #2B0B21;
}

    .black:hover {
        background-color: #E5E907;
    }

.blue {
    background-color: #7490EA;
}

    .blue:hover {
        background-color: #4A8445;
    }

.grey {
    background-color: #C6C4B7;
}

    .grey:hover {
        background-color: #E3DB58;
    }

.white {
    background-color: white;
}