body{
    background: #333;
}

.outer-rotate {
    animation-name: rotateOuter;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: fixed;
    height: 100%;
    width: 100%;
}

@keyframes rotateOuter {
    0% { transform: rotate(0) scale(1.1); }
    100% { transform: rotate(2deg) scale(1.2); }
}

img{   
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    border: 10px white solid;
}

#noImg{
    color: white;
    position: absolute;
    top: 45%;
    left: 40%;
}

#blackscreen{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: black;
    z-index: 2;
}

.modal{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}

.main-img{
    display: block;
    position: absolute;  
    max-width: 75%;
    max-height: 75%;
    z-index: 1;
    top: 50%;
    left: 50%;  
    transform: translate(-50%, -50%);
}

.center {
    position: fixed;
    width: 100%;
    height: 100%;
}

.background-img {
    position: fixed;
    max-width: 75%;
    max-height: 75%;
    filter: grayscale(100%);
}



.background-img:nth-child(1){
    top: -10%;
    left: -10%;
}
.background-img:nth-child(2){
    bottom: -10%;
    right: -10%;
}
.background-img:nth-child(3){
    top: -10%;
    right: -10%;
}
.background-img:nth-child(4){
    bottom: -10%;
    left: -10%;
}
.background-img:nth-child(5){
    bottom: -50%;
    left: 20%;
    z-index: 0;
}
.background-img:nth-child(6){
    top: -50%;
    left: 40%;
    z-index: 0;
}