.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.05));
    opacity: 0.8;
    z-index: 1;
}

.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.cloud-1 {
    width: 150px; height: 50px; top: 15%; left: -150px;
    animation: moveClouds 25s linear infinite;
}
.cloud-1::before { width: 70px; height: 70px; top: -30px; left: 20px; }
.cloud-1::after { width: 90px; height: 90px; top: -45px; left: 60px; }

.cloud-2 {
    width: 200px; height: 60px; top: 40%; right: -200px;
    animation: moveCloudsReverse 35s linear infinite;
    transform: scale(0.8);
    opacity: 0.5;
}
.cloud-2::before { width: 80px; height: 80px; top: -40px; left: 30px; }
.cloud-2::after { width: 100px; height: 100px; top: -50px; left: 70px; }

.cloud-3 {
    width: 120px; height: 40px; bottom: 20%; left: -120px;
    animation: moveClouds 40s linear infinite 10s;
    transform: scale(1.2);
}
.cloud-3::before { width: 50px; height: 50px; top: -20px; left: 15px; }
.cloud-3::after { width: 70px; height: 70px; top: -35px; left: 45px; }

@keyframes moveClouds {
    0% { transform: translateX(0); }
    100% { transform: translateX(110vw); }
}

@keyframes moveCloudsReverse {
    0% { transform: translateX(0) scale(0.8); }
    100% { transform: translateX(-110vw) scale(0.8); }
}