@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Signika:400,700&display=swap');

* {
    margin: 0;
    padding: 0;
    background-color: #F5F4D6;
}

figcaption {
    font-family: 'Signika', sans-serif;
    text-align: center;
}

main#canvas {
    height: 40vw;
    width: 50vw;
    margin: 5.6vh auto 0 auto;
    background-color: #fbf2d0;
}

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

.oneleft {
    float: left;
    width: 17.5%;
    height: 100%;
    background-color: #ffebc1;
}

.twoleft {
    float: left;
    width: 15%;
    height: 100%;
    background-color: #51424f;
}

.threeleft {
    float: left;
    width: 9%;
    height: 100%;
    background-color: #f2e8c6;
}

.fourleft {
    float: left;
    width: 9.2%;
    height: 100%;
    background-color: #716b60;
}

.fiveleft {
    float: left;
    width: 11%;
    height: 100%;
    background-color: #cfc0a6;
}

.sixleft {
    float: left;
    width: 18.5%;
    height: 100%;
    background-color: #efe3c4;
}

.sevenleft {
    float: left;
    width: 9%;
    height: 100%;
    background-color: #a98b75;
}

.eightleft {
    float: left;
    width: 9.3%;
    height: 100%;
    background-color: #676257;
}

.nineleft {
    float: left;
    width: 1.2%;
    height: 100%;
    background-color: #fbf2d0;
}

.oneright {
    float: right;
    width: 17.5%;
    height: 100%;
    background-color: #ffebc1;
}

.tworight {
    float: right;
    width: 15%;
    height: 100%;
    background-color: #51424f;
}

.threeright {
    float: right;
    width: 9%;
    height: 100%;
    background-color: #f2e8c6;
}

.fourright {
    float: right;
    width: 9.2%;
    height: 100%;
    background-color: #716b60;
}

.fiveright {
    float: right;
    width: 11%;
    height: 100%;
    background-color: #cfc0a6;
}

.sixright {
    float: right;
    width: 18.5%;
    height: 100%;
    background-color: #efe3c4;
}

.sevenright {
    float: right;
    width: 9%;
    height: 100%;
    background-color: #a98b75;
}

.eightright {
    float: right;
    width: 9.3%;
    height: 100%;
    background-color: #676257;
}

.nineright {
    float: right;
    width: 1.2%;
    height: 100%;
    background-color: #fbf2d0;
}

/* hover color */
.oneleft:hover {
    background-color: aqua;
}

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

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

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

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

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

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

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

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

.oneright:hover {
    background-color: aqua;
}

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

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

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

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

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

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

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

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