* {
    padding: 0;
    margin: 0;
}

main#main {
    width: 36vw;
    height: 31vw;
    background-color: #dadada;
    margin-right: auto;
    margin-left: auto;
}

section {
    width: 98%;
    height: 99%;
    margin: auto;
    position: relative;
}

section.yellow {
    width:66.3%;
    height: 48%;
    top: 6%;
}

section.red {
    width:66.3%;
    height: 38%;
    top: 6%;
}

article {
    position: relative;
    margin: auto;
}

article.black {
    width:76%;
    height: 80%;
    top: 20%;
}

article.blue1 {
    border-style: solid;
    border-color: orange;
    border-top-width: .38vw;
    border-bottom-width: .38vw;
    border-right-width: .38vw;
    border-left-width: .38vw;
    width: 60%;
    height: 9%;
    top: 26%;
}

article.blue2 {
    border-style: solid;
    border-color: orange;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 60%;
    height:9%;
    top: 26%;
}

article.blue3 {
    border-style: solid;
    border-color: orange;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 60%;
    height: 9%;
    top: 26%;
}

article.blue4 {
    border-style: solid;
    border-color: orange;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 60%;
    height: 9%;
    top: 26%;
}

figure {
    position: relative;
    margin: auto;
}

figure.yellow1 {
    border-style: solid;
    border-color: #B80010;
    border-top-width: .38vw;
    border-bottom-width: .38vw;
    border-right-width: .38vw;
    border-left-width: .38vw;
    width: 62%;
    height: 8.5%;
    top: 26%;
}

figure.yellow2 {
    border-style: solid;
    border-color: #B80010;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 62%;
    height:8.5%;
    top: 26%;
}

figure.yellow3 {
    border-style: solid;
    border-color: #B80010;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 62%;
    height: 8.5%;
    top: 26%;
}

figure.yellow4 {
    border-style: solid;
    border-color: #B80010;
    border-top-width: 0;
    border-right-width: .38vw;
    border-left-width: .38vw;
    border-bottom-width:  .38vw;
    width: 62%;
    height: 8.5%;
    top: 26%;
}

.yellow {
    background-color: yellow;}

.black {
    background-color: black;}

.red {
    background-color: #A2081C;}

.blue1 {
    background-color: #4F69C4;}

.blue2 {
    background-color: #4F69C4;}

.blue3 {
    background-color: #4F69C4;}

.blue4 {
    background-color: #4F69C4;}

.yellow1 {
    background-color: yellow;}

.yellow2 {
    background-color: yellow;}

.yellow3 {
    background-color: yellow;}

.yellow4 {
    background-color: yellow;}

#canvas:hover {
background-color: #4F69C4;;
}

.yellow:hover {
    background-color: #e4add3;;
}

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

.red:hover  {
    background-color: #4f8f55;
}

.blue1:hover  {
    background-color: #bcade4;
}

.blue2:hover  {
    background-color: #e4dead;
}

.blue3:hover  {
    background-color: #7ddbe7;
}

.blue4:hover  {
    background-color: #89e68d;
}

.yellow1:hover  {
    background-color: #ddab60;
}

.yellow2:hover  {
    background-color: #8563ac;
}

.yellow3:hover  {
    background-color: #6082b6;
}

.yellow4:hover  {
    background-color: #e4adad;
}