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

* {
    margin: 0;
    padding: 0;
}

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

section {
    width: 1%;
    height: 60%;
    float: left;
}

/* color classes */

.navajowhite {
    background-color: navajowhite;
}

.darkslateblue {
    background-color: darkslateblue;
}

.lightgoldenrodyellow {
    background-color: lightgoldenrodyellow;
}

.darkolivegreen {
    background-color: darkolivegreen;
}

.tan {
    background-color: tan;
}

.rosybrown {
    background-color: rosybrown;
}

/* css pseudo-class hover states*/

.navajowhite:hover {
    background-color: darkslategrey;
}

.darkslateblue:hover {
    background-color: darkgray;
}

.lightgoldenrodyellow:hover {
    background-color: gainsboro;
}

.darkolivegreen:hover {
    background-color: grey;
}

.tan:hover {
    background-color: darkgray;
}

.rosybrown:hover {
    background-color: dimgray;
}