body, html {
    height: 100%;
    margin: 0;
    background-color: black;
}

.mosaic {
    position: relative;
    width: 100%;
    height: 100%;
}

.mosaic-img {
    position: absolute;
    width: 100px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.loading {
    opacity: 0.5;
}

.mosaic-img:nth-child(1) {top: 0; left: 0;}
.mosaic-img:nth-child(2) {top: 0; left: 105px;}
.mosaic-img:nth-child(3) {top: 0; left: 210px;}
.mosaic-img:nth-child(4) {top: 0; left: 315px;}
.mosaic-img:nth-child(5) {top: 0; left: 420px;}
.mosaic-img:nth-child(6) {top: 0; left: 525px;}
.mosaic-img:nth-child(7) {top: 0; left: 630px;}
.mosaic-img:nth-child(8) {top: 0; left: 735px;}
.mosaic-img:nth-child(9) {top: 0; left: 840px;}
.mosaic-img:nth-child(10) {top: 0; left: 945px;}
.mosaic-img:nth-child(11) {top: 155px; left: 0;}
.mosaic-img:nth-child(12) {top: 155px; left: 105px;}
.mosaic-img:nth-child(13) {top: 155px; left: 210px;}
.mosaic-img:nth-child(14) {top: 155px; left: 315px;}
.mosaic-img:nth-child(15) {top: 155px; left: 420px;}
.mosaic-img:nth-child(16) {top: 155px; left: 525px;}
.mosaic-img:nth-child(17) {top: 155px; left: 630px;}
.mosaic-img:nth-child(18) {top: 155px; left: 735px;}
.mosaic-img:nth-child(19) {top: 155px; left: 840px;}
.mosaic-img:nth-child(20) {top: 155px; left: 945px;}
.mosaic-img:nth-child(21) {top: 310px; left: 0;}
.mosaic-img:nth-child(22) {top: 310px; left: 105px;}
.mosaic-img:nth-child(23) {top: 310px; left: 210px;}
.mosaic-img:nth-child(24) {top: 310px; left: 315px;}
.mosaic-img:nth-child(25) {top: 310px; left: 420px;}
.mosaic-img:nth-child(26) {top: 310px; left: 525px;}
.mosaic-img:nth-child(27) {top: 310px; left: 630px;}
.mosaic-img:nth-child(28) {top: 310px; left: 735px;}
.mosaic-img:nth-child(29) {top: 310px; left: 840px;}
