html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white; 
    animation: changeBackgroundColor 1s 1s forwards;
}

@keyframes changeBackgroundColor {
    0% { background-color: white; } 
    100% { background-color: #AD88C6 } 
}

@keyframes changeImage {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

img#changingImage {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

@keyframes changeImageSrc {
    0%, 100% { content: url('images/1.webp'); }
    3.125% { content: url('images/2.webp'); }
    6.25% { content: url('images/3.webp'); }
    9.375% { content: url('images/4.webp'); }
    12.5% { content: url('images/5.webp'); }
    15.625% { content: url('images/6.webp'); }
    18.75% { content: url('images/7.webp'); }
    21.875% { content: url('images/8.webp'); }
    25% { content: url('images/9.webp'); }
    28.125% { content: url('images/10.webp'); }
    31.25% { content: url('images/11.webp'); }
    34.375% { content: url('images/12.webp'); }
    37.5% { content: url('images/13.webp'); }
    40.625% { content: url('images/14.webp'); }
    43.75% { content: url('images/15.webp'); }
    46.875% { content: url('images/16.webp'); }
    50% { content: url('images/17.webp'); }
    53.125% { content: url('images/18.webp'); }
    56.25% { content: url('images/19.webp'); }
    59.375% { content: url('images/20.webp'); }
    62.5% { content: url('images/21.webp'); }
    65.625% { content: url('images/22.webp'); }
    68.75% { content: url('images/23.webp'); }
    71.875% { content: url('images/24.webp'); }
    75% { content: url('images/25.webp'); }
    78.125% { content: url('images/26.webp'); }
    81.25% { content: url('images/27.webp'); }
    84.375% { content: url('images/28.webp'); }
    87.5% { content: url('images/29.webp'); }
    90.625% { content: url('images/30.webp'); }
    93.75% { content: url('images/31.webp'); }
    96.875% { content: url('images/32.webp'); }
    100% { content: url('images/32.webp'); }
}

img#changingImage {
    animation: changeImageSrc 1.5s forwards;
}