@charset "UTF-8";



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

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


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

main#canvas {
    width: 70vw;
    height: 70vw;
    margin: 2vh auto 0 auto;
    background-color: black;
}

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


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


section {
    width: 50%;
    height: 50%;
    float: left;
}

article.yellow {
    width: 89.4736842%;
    height: 55.5555556%;
    margin-top: 44.4444444%;
    margin-left: 10.5263158%;
}

article.gold {
    width: 89.4736842%;
    height: 55.5555556%;
    margin-top: 44.4444444%;
    margin-right: 10.5263158%;
}

article.magenta {
    width: 89.4736842%;
    height: 55.5555556%;
    margin-bottom: 44.4444444%;
    margin-left: 10.5263158%;
}

article.red {
    width: 89.4736842%;
    height: 55.5555556%;
    margin-bottom: 44.4444444%;
    margin-right: 10.5263158%;
}

figure.violet {
    width: 82%;
    height: 55.5555556%;
    margin-top: 28%;
    margin-left: 18%;
    float: left;
}

figure.darkblue {
    width: 82%;
    height: 55.5555556%;
    margin-top: 28%;
    margin-right: 18%;
    float: left;
}

figure.limegreen {
    width: 82%;
    height: 55.5555556%;
    margin-bottom: : 28%;
    margin-left: 18%;
}

figure.lightblue {
    width: 82%;
    height: 55.5555556%;
    margin-bottom: : 28%;
    margin-right: 18%;
}

figure.red2 {
    width: 62%;
    height: 40%;
    margin-top: 24.8%;
    float: right;
}

figure.magenta2 {
    width: 62%;
    height: 40%;
    margin-top: 24.8%;
    float: left;
}

figure.gold2 {
    width: 62%;
    height: 40%;
    float: right;
}

figure.yellow2 {
    width: 62%;
    height: 40%;
    float: left;
}


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


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


.red {
    background-color: #c63323;
}

.red2 {
    background-color: #c63323;
}


.limegreen {
    background-color: #61a946;
}

.darkblue {
    background-color: #2a529a;
}

.lightblue {
    background-color: #349eda;
}

.violet {
    background-color: #494e92;
}

.yellow {
    background-color: #fbe619;
}

.yellow2 {
    background-color: #fbe619;
}

.gold {
    background-color: #e29e1f;
}

.gold2 {
    background-color: #e29e1f;
}

.magenta {
    background-color: #bc327f;
}

.magenta2 {
    background-color: #bc327f;
}




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

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

.yellow2:hover {
    background-color: violet;
}

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

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

.gold2:hover {
    background-color: darkblue;
}

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

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

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

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

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

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

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