@charset "UTF-8";



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

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


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

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

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


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


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

figure {
    width: .9175%;
    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;
}

.blue {
    background-color: deepskyblue;
}

.ltblue {
    background-color: lightskyblue;
}

.pink {
    background-color: #d36998;
}

.gold {
    background-color: goldenrod;
}

.white {
    background-color: white;
}




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

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

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

.ltblue:hover {
    background-color: brown;
}

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

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

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