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

main#canvas {
    width: 50vw;
    height: 50.5vw;
    margin: auto;
    }

    section {
        width: 2.94%;
        height: 100%;
        float: left;
    }

/* css color classes*/

.purple {
    background-color: #9D86B7;
}

    .purple:hover {
        background-color: #EEDD2D;
    }

.pink {
    background-color: #DF66A1;
}

    .pink:hover {
        background-color: #FEB300;
    }

.yellow {
    background-color: #EEDD2D;
}

    .yellow:hover {
        background-color: #9D86B7;
    }

.darkgreen {
    background-color: #00AC75;
}

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

.lightblue {
    background-color: #87BED3;
}

    .lightblue:hover {
        background-color: #47BBBF;
    }

.orange {
    background-color: #F88002;
}

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

.lightskyblue {
    background-color: #47BBBF;
}

    .lightskyblue:hover {
        background-color: #00AC75;
    }

.lightgreen {
    background-color: #A3C52E;
}

    .lightgreen:hover {
        background-color: #F88002;
    }

.mustard {
    background-color: #FEB300;
}

    .mustard:hover {
        background-color: #DF66A1;
    }