Why do the clouds in this CSS animation move to a new line instead of leaving the page?

Question

I'm trying to have these clouds move across the web page and out of it, but the clouds keep moving to a new line. Here is the website: http://therealrohanm.me/Falcon-Hacks-Website/ (the clouds take a few seconds to show)

Here is the code: https://github.com/Meeshbhoombah/Falcon-Hacks-Website

How can I have them not move to a new line? Also, how can I the clouds down?

Answer 1

Try adding a class to each of your clouds "cloud"

<img class="cloud-1" src="images/Cloud.png">

should become

<img class="cloud cloud-1" src="images/Cloud.png">

Then add some CSS:

#animated-cloud-background .cloud {
    position: absolute;
    top: 0;
    left: 0;
}