@charset "UTF-8";



/*----- CSS Reset -----*/

* {
    margin: 0;
    padding: 0;
    color: #000;
}


/*----- Canvas-----*/

main#canvas {
    width: 60vw;
    height: 48vw;
    margin: 2vh auto 0 auto;
}

body {
    text-align: center;
    padding-top: 1vh;
}


/*----- Semantic tags-----*/


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

figure {
    width: 2.32%;
    height: 100%;
    float: left;

}

figcaption {
    width: 60vw;
    margin: 0.5vw auto 0 auto;
    font-size: 12pt;
    text-align: right;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*----- CSS Color Classes-----*/


.black {
    background-color: black;
}

.gray {
    background-color: slategray;
}

.olive {
    background-color: darkkhaki;
}

.green {
    background-color: seagreen;
}

.pink {
    background-color: pink;
}

.red {
    background-color: crimson;
}

.gold {
    background-color: gold;
}

.blue {
    background-color: royalblue;
}

.maroon {
    background-color: maroon;
}


/*----- Hover Pseudo-Class Interactions-----*/

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

.gray:hover {
    background-color: limegreen;
}

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

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

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

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

.gold:hover {
    background-color: darkcyan;
}

.maroon:hover {
    background-color: darkcyan;
}