Fix title text on scrolling background

I'm working on a header with a moving background using CSS animation. I have the "scrolling" background working as a hook element in the header, but fixing the text in place has been problematic (so far). There may be a better way to do this. I'm trying to do this with CSS, but it may require a JavaScript solution. This is a dev site, so the issue isn't time critical.

https://webdevwp.com/

Here's the code I'm using:

#sky {
    overflow: hidden;
    width: 100%;
    height: auto;
}

#clouds {
    width: 200%;
    height: 200px;
    background-image: url('https://webdevwp.com/wp-content/uploads/2020/03/clouds_bg2_760x485.jpg');
    background-size: cover;
    -webkit-animation: movingclouds 25s linear infinite;
    -moz-animation: movingclouds 25s linear infinite;
    -o-animation: movingclouds 25s linear infinite;
}

@keyframes movingclouds {
    0% {margin-left: 0%;}
    100% {margin-left: -100%;}
}

#clouds h1 {
    text-align: center;
    position: relative;
    margin-bottom: 12px;
}

#clouds h3 {
    text-align: center;
}

In the Header hook:

<div id="sky">
	<div id="clouds">
    <h1 >Web Dev WP</h1>
  </div>
</div>