@keyframes loading-bar-animation {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

body {
    width: 100%;
    height: 100%;
    background-color: black;
}

#imshow {
    background-color: black;
}

#mainimg.loaded,
#bgimg.loaded {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#imshow,
#image-main,
#image-bg,
#fade-main,
#fade-bg,
img {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingbar {
    z-index: 10;
    left: 0;
    width: 200%;
    background: repeating-linear-gradient(90deg,
            aqua,
            aqua 2.5%,
            teal 2.5%,
            teal 5%);
    visibility: hidden;
    animation: loading-bar-animation 7s linear infinite;
}

.progressbar {
    left: -101%;
    top: 0;
    width: 101%;
    height: 5px;
    position: fixed;
    z-index: 3;
}

#progressbar0 {
    background-color: aqua;
}

#progressbar1 {
    background-color: teal;
}

#mainimg,
#bgimg {
    opacity: 0;
    transition: none;
}

#image-main {
    z-index: 3;
}

#image-bg {
    z-index: 1;
}

#fademainimg {
    z-index: 2;
}

#image-main img, #fade-main img {
    object-fit: contain;
}

#image-bg img, #fade-bg img {
    object-fit: cover;
    filter: blur(8px);
    left: -5%;
    top: -5%;
    width: 110%;
    height: 110%;
}