@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}

main#canvas {
    width: 100%;
    height: 70vw;
}

section {
    width: 4%;
    height: 5.5%;
    float: left;
    margin: 20px;
    border-radius: 200px;
}

/* color classes */

.red {
    background-color: tomato;
}

.orange {
    background-color: orange;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: limegreen;
}

.cyan {
    background-color: powderblue;
}

.blue {
    background-color: blue;
}

.purple {
    background-color: darkorchid;
}

.pink {
    background-color: peachpuff;
}

.black {
    background-color: black;
}

/* css pseudo-class hover states*/

.red:hover {
    background-color: cyan;
}

.orange:hover {
    background-color: peachpuff;
}

.yellow:hover {
    background-color: darkorchid;
}

.green:hover {
    background-color: blue;
}

.cyan:hover {
    background-color: tomato;
}

.blue:hover {
    background-color: green;
}

.purple:hover {
    background-color: yellow;
}

.pink:hover {
    background-color: orange;
}

.black:hover {
    background-color: peachpuff;
}