body {
    margin: 0;
}

.clouds {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.cloud {
    position: absolute;
    bottom: var(--cloud-bottom-offset);
    right: calc(var(--cloud-width) * -1);
    display: block;
    width: var(--cloud-width);
    height: var(--cloud-radius);
    border-radius: 50%;
    animation: float-left var(--cloud-float-duration) var(--cloud-float-delay) linear infinite;
}
.cloud::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(136, 246, 251, 0.3);
    border-radius: inherit;
    animation: var(--cloud-sway-type) var(--cloud-sway-duration) var(--cloud-sway-delay) ease-in-out alternate infinite;
}

/* Using negative delays to start animations at different points */
.cloud:nth-child(1) {
    --cloud-bottom-offset: 35vh;
    --cloud-width: 27vw;
    --cloud-radius: 5vw;
    --cloud-float-duration: 56s;
    --cloud-sway-duration: 7s;
    --cloud-float-delay: -10s;
    --cloud-sway-delay: 0s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(2) {
    --cloud-bottom-offset: 77vh;
    --cloud-width: 11vw;
    --cloud-radius: 2vw;
    --cloud-float-duration: 54s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -25s;
    --cloud-sway-delay: 0.5s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(3) {
    --cloud-bottom-offset: 2vh;
    --cloud-width: 26vw;
    --cloud-radius: 5vw;
    --cloud-float-duration: 38s;
    --cloud-sway-duration: 6s;
    --cloud-float-delay: -15s;
    --cloud-sway-delay: 1s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(4) {
    --cloud-bottom-offset: 35vh;
    --cloud-width: 27vw;
    --cloud-radius: 10vw;
    --cloud-float-duration: 49s;
    --cloud-sway-duration: 6s;
    --cloud-float-delay: -30s;
    --cloud-sway-delay: 0s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(5) {
    --cloud-bottom-offset: 88vh;
    --cloud-width: 20vw;
    --cloud-radius: 3vw;
    --cloud-float-duration: 54s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -45s;
    --cloud-sway-delay: 0.8s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(6) {
    --cloud-bottom-offset: 60vh;
    --cloud-width: 20vw;
    --cloud-radius: 3vw;
    --cloud-float-duration: 44s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -5s;
    --cloud-sway-delay: 0.3s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(7) {
    --cloud-bottom-offset: 1vh;
    --cloud-width: 28vw;
    --cloud-radius: 4vw;
    --cloud-float-duration: 32s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -20s;
    --cloud-sway-delay: 0.6s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(8) {
    --cloud-bottom-offset: 34vh;
    --cloud-width: 16vw;
    --cloud-radius: 10vw;
    --cloud-float-duration: 47s;
    --cloud-sway-duration: 10s;
    --cloud-float-delay: -35s;
    --cloud-sway-delay: 0s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(9) {
    --cloud-bottom-offset: 49vh;
    --cloud-width: 9vw;
    --cloud-radius: 1vw;
    --cloud-float-duration: 36s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -28s;
    --cloud-sway-delay: 0.4s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(10) {
    --cloud-bottom-offset: 50vh;
    --cloud-width: 13vw;
    --cloud-radius: 7vw;
    --cloud-float-duration: 51s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: -12s;
    --cloud-sway-delay: 0s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(11) {
    --cloud-bottom-offset: 82vh;
    --cloud-width: 26vw;
    --cloud-radius: 10vw;
    --cloud-float-duration: 44s;
    --cloud-sway-duration: 10s;
    --cloud-float-delay: -22s;
    --cloud-sway-delay: 0.2s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(12) {
    --cloud-bottom-offset: 50vh;
    --cloud-width: 16vw;
    --cloud-radius: 8vw;
    --cloud-float-duration: 39s;
    --cloud-sway-duration: 7s;
    --cloud-float-delay: -38s;
    --cloud-sway-delay: 0.1s;
    --cloud-sway-type: sway-up-to-down;
}

@keyframes float-left {
    to {
        transform: translateX(-175vw);
    }
}
@keyframes sway-down-to-up {
    from {
        transform: translateY(-40%);
    }
    to {
        transform: translateY(40%);
    }
}
@keyframes sway-up-to-down {
    from {
        transform: translateY(40%);
    }
    to {
        transform: translateY(-40%);
    }
}