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

main#canvas {
    width: 35vw;
    height: 52vw;
    margin: auto;
    /* background-color: grey; */
    }

    section {
        float: left;
        width: 4.54%;
        height: 3.03%;
    }
    
   

/* css color classes*/

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

    .black:hover {
        background-color: #9E9FBA;
    }

.lightgrey {
    background-color: #AEB3C2;
}

    .lightgrey:hover {
        background-color: #414656;
    }

.grey {
    background-color: #83808E;
}

    .grey:hover {
        background-color: #2A2C34;
    }

.darkgrey {
    background-color: #656B7D;
}    

    .darkgrey:hover {
        background-color: #D1BEBE;
    }   

.rust {
    background-color: #8F452D;
}

    .rust:hover {
        background-color: #D1BC62;
    }

.yellow {
    background-color: #D1BC62;
}

    .yellow:hover {
        background-color: #8F452D;
    }
    

.peach {
    background-color: #D1BEBE;
}

    .peach:hover {
        background-color: #444A57;
    }

.silver {
    background-color: #C6C2C5;
}

    .silver:hover {
        background-color: #2A2C34;
    }

.silver-two {
    background-color: #9E9FBA;
}

    .silver-two:hover {
        background-color: #767F8F;
    }

.bluegrey {
    background-color: #444A57;
}

    .bluegrey:hover {
        background-color: #AEB3C2;
    }

.slategrey {
    background-color: #414656;
}

    .slategrey:hover {
        background-color: #83808E;
    }

.grey-two {
    background-color: #767F8F;
}

    .grey-two:hover {
        background-color: #C6C2C5;
    }