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

section {
    width: 97%;
    height: 97%;
    margin: auto;
    position: relative;
    background-color: beige;
    top: .7vw;
}

article {
    position: relative;
    }

article.black1 {
    width: 11.5%;
    height: 45.5%;
    left: 5%;
}

article.black2 {
    width: 6.55%;
    height: 54.5%;
    left: 5%;
}

article.black3 {
    width: 5.15%;
    height: 45.5%;
    left: 21.8%;
    bottom: 100%;
}

article.black4 {
    width: 5%;
    height: 8.5%;
    left: 26.9%;
    bottom: 145.5%;
}

article.black5 {
    width: 5%;
    height: 12%;
    left: 26.9%;
    bottom: 133%;
}

article.black6 {
    width: 15.6%;
    height: 12.4%;
    left: 16.5%;
    bottom: 120.50%;
}

article.black7 {
    width: 10.6%;
    height: 12.4%;
    left: 16.5%;
    bottom: 120.50%;
}

article.black8 {
    width: 15.6%;
    height: 29.7%;
    left: 16.5%;
    bottom: 120.50%;
}

.beige {
    background-color: EFE9D7;
}

.black1 {
    background-color: black;
}

.black2 {
    background-color: black;
}

.black3 {
    background-color: black;
}

.black4 {
    background-color: black;
}

.black5 {
    background-color: black;
}

.black6 {
    background-color: black;
}

.black7 {
    background-color: black;
}

.black8 {
    background-color: black;
} 
    
.beige:hover {
    background-color: #435a45;}

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

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

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

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

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

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

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

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