body {
    background: #1a1e23;
    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) ease-in 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;
}


.cloud:nth-child(0) {
    --cloud-bottom-offset: 58vh;
    --cloud-width: 27vw;
    --cloud-radius: 2vw;
    --cloud-float-duration: 49s;
    --cloud-sway-duration: 9s;
    --cloud-float-delay: 25s;
    --cloud-sway-delay: 1s;
    --cloud-sway-type: sway-down-to-up;
}
.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: 6s;
    --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: 22s;
    --cloud-sway-delay: 3s;
    --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: 29s;
    --cloud-sway-delay: 2s;
    --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: 9s;
    --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: 1s;
    --cloud-sway-delay: 4s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(6) {
    --cloud-bottom-offset: 88vh;
    --cloud-width: 20vw;
    --cloud-radius: 3vw;
    --cloud-float-duration: 54s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: 1s;
    --cloud-sway-delay: 4s;
    --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: 23s;
    --cloud-sway-delay: 5s;
    --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: 9s;
    --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: 5s;
    --cloud-sway-delay: 3s;
    --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: 16s;
    --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: 21s;
    --cloud-sway-delay: 0s;
    --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: 24s;
    --cloud-sway-delay: 1s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(13) {
    --cloud-bottom-offset: 42vh;
    --cloud-width: 17vw;
    --cloud-radius: 3vw;
    --cloud-float-duration: 53s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: 25s;
    --cloud-sway-delay: 5s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(14) {
    --cloud-bottom-offset: 1vh;
    --cloud-width: 11vw;
    --cloud-radius: 5vw;
    --cloud-float-duration: 46s;
    --cloud-sway-duration: 10s;
    --cloud-float-delay: 0s;
    --cloud-sway-delay: 4s;
    --cloud-sway-type: sway-down-to-up;
}
.cloud:nth-child(15) {
    --cloud-bottom-offset: 28vh;
    --cloud-width: 17vw;
    --cloud-radius: 2vw;
    --cloud-float-duration: 52s;
    --cloud-sway-duration: 7s;
    --cloud-float-delay: 19s;
    --cloud-sway-delay: 5s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(16) {
    --cloud-bottom-offset: 46vh;
    --cloud-width: 17vw;
    --cloud-radius: 1vw;
    --cloud-float-duration: 58s;
    --cloud-sway-duration: 9s;
    --cloud-float-delay: 1s;
    --cloud-sway-delay: 5s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(17) {
    --cloud-bottom-offset: 51vh;
    --cloud-width: 16vw;
    --cloud-radius: 7vw;
    --cloud-float-duration: 47s;
    --cloud-sway-duration: 6s;
    --cloud-float-delay: 18s;
    --cloud-sway-delay: 1s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(18) {
    --cloud-bottom-offset: 3vh;
    --cloud-width: 23vw;
    --cloud-radius: 1vw;
    --cloud-float-duration: 54s;
    --cloud-sway-duration: 10s;
    --cloud-float-delay: 19s;
    --cloud-sway-delay: 1s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(19) {
    --cloud-bottom-offset: 7vh;
    --cloud-width: 11vw;
    --cloud-radius: 10vw;
    --cloud-float-duration: 46s;
    --cloud-sway-duration: 6s;
    --cloud-float-delay: 28s;
    --cloud-sway-delay: 0s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(20) {
    --cloud-bottom-offset: 22vh;
    --cloud-width: 26vw;
    --cloud-radius: 6vw;
    --cloud-float-duration: 36s;
    --cloud-sway-duration: 5s;
    --cloud-float-delay: 1s;
    --cloud-sway-delay: 3s;
    --cloud-sway-type: sway-up-to-down;
}
.cloud:nth-child(21) {
    --cloud-bottom-offset: 20vh;
    --cloud-width: 24vw;
    --cloud-radius: 5vw;
    --cloud-float-duration: 42s;
    --cloud-sway-duration: 10s;
    --cloud-float-delay: 4s;
    --cloud-sway-delay: 4s;
    --cloud-sway-type: sway-down-to-up;
}


@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%);
    }
}