* {
    padding: 0;
    margin: 0;
}

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

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

article {
    position: relative;
    }

article.red1 {
    width: 32.5%;
    height: 88%;
    left: 30%;
    top: 12%;
}

article.red2 {
    width: 12%;
    height: 27%;
    left: 18%;
    bottom: 15%;
}

article.red3 {
    width: 6%;
    height: 55%;
    left: 12%;
    bottom: 70%;
}

article.red4 {
    width: 12%;
    height: 12%;
    left: 12%;
    bottom: 132%;
}

article.black {
    width: 12%;
    height: 12%;
    left: 18%;
    bottom: 120%;
}

article.green {
    width: 37.5%;
    height: 38.1%;
    left: 62.5%;
    bottom: 132%;
}

figure {
    position: relative;
}

figure.cyan {
    width: 35%;
    height: 32%;
    left: 32%;
    top: 32%;
}

figure.cyan2 {
    width: 33%;
    height: 16%;
    left: 67%;
    top: 0%;
}

.purple {
    background-color: #AA83C7;}

.red1 {
    background-color: #F93647;}

.red2 {
    background-color: #F93647;}

.red3 {
    background-color: #F93647;}

.red4 {
    background-color: #F93647;}

.black {
    background-color: black;}

.green {
    background-color: #33B35F;}

.cyan {
    background-color: #2AA3B7;}

.cyan2 {
    background-color: #2AA3B7;} 

.red1:hover {
    background-color: #4f8f55;
}
.red2:hover {
    background-color: #e4dead;
}
.red3:hover {
    background-color: #bcade4;
}
.red4:hover {
    background-color: #7ddbe7;
}
.purple:hover {
    background-color: #e4add3;
}
.black:hover {
    background-color: #ddab60;
}
.green:hover {
    background-color: #8563ac;
}
.cyan:hover {
    background-color: #ff9196;
}
.cyan2:hover {
    background-color: #89e68d;
}