body,
html {
    height: 100%;
    margin: 0;
}

.flower-container {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    top: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.flower {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    animation: flower linear infinite;
}

.flower.foreground {
    background-image: url('../img/flowerB_500.png'); /* Your large flower image URL here */
    opacity: 0.7;
    animation-duration: 15s;
}

.flower.foreground.layered {
    animation-delay: 7.5s;
}

.flower.middleground {
    background-image: url('../img/flowerM_500.png'); /* Your medium flower image URL here */
    opacity: 0.5;
    animation-duration: 20s;
}

.flower.middleground.layered {
    animation-delay: 10s;
}

/*.flower.background {
    background-image: url('../img/flowerS_500.png');
    opacity: 0.2;
    animation-duration: 30s;
}*/

.flower.background.layered {
    animation-delay: 15s;
}

@keyframes flower {
    0% {
        transform: translate3d(0, -100%, 0);
    }

    100% {
        transform: translate3d(15%, 100%, 0);
    }
}