<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="stylesorganise.css">
</head>

<body>
    <div class="container">
        <div class="cloud1">
            <div class="base1">
                <div class="shape one"></div>
                <div class="shape two"></div>
            </div>
        </div>

        <div class="cloud2">
            <div class="base2">
                <div class="base2half"></div>
                <div class="shape three"></div>
                <div class="shape four"></div>
                <div class="shape five"></div>
                <div class="shape six"></div>
                <div class="shape seven"></div>
            </div>
        </div>
        
        </div>

    </div>
</body>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-width: 800px;
    background: #5899c1;

.container {
    position: relative;
     height: 400px;

}

.cloud1 {
    position: absolute;
    scale: 40%;
    padding: 10px;
    animation: animateCloud 60s linear infinite;
}
.cloud2 {
    position: absolute;
    scale: 60%;
    padding: 10px;
    animation: animateCloud 70s linear infinite;
}

/* @keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }

    100% {
        margin-left: 100%;
    }
} */

.base1 {
    position: relative;
    top: 50px;
    width: 300px;
    height: 20px;
    background: #ddd4d0;
    border-radius: 100px;
    /* background: radial-gradient(75% 110% at bottom, #ddd4d0 80%, #fff 100%); */
    background: linear-gradient(#fff, #ddd4d0 40%);

}

.one {
    content: '';
    position: absolute;
    top: -100px;
    left: 40px;
    width: 120px;
    height: 120px;
    background: #ddd4d0;
    border-radius: 50%;
    background: radial-gradient(100% 80% at bottom right, #ddd4d0 110%, #fff 130%);
    /* box-shadow: 100px -30px 0 30px #fff; */
}

.two {
    content: '';
    position: absolute;
    top: -170px;
    left: 135px;
    width: 150px;
    height: 190px;
    background: #ddd4d0;
    border-top-left-radius: 45%;
    border-top-right-radius: 60%;
    border-bottom-right-radius: 40%;
    background: radial-gradient(75% 110% at bottom, #ddd4d0 85%, #fff 90%);
    /* background: linear-gradient( 145deg, #fff 10.5%, #ddd4d0 30%); */
}

.base2 {
    position: relative;
    top: 500px;
    width: 450px;
    height: 20px;
    background: #ddd4d0;
    border-radius: 100px;
    background: linear-gradient(#fff, #ddd4d0 40%);
}

.base2half {
    position: absolute;
    top: -13px;
    right: 6px;
    width: 400px;
    height: 30px;
    background: #ddd4d0;
    border-radius: 50% 50% 50% 50%;
    background: linear-gradient(#fff, #ddd4d0 50%);
}

.three {
    content: '';
    position: absolute;
    top: -110px;
    left: 110px;
    width: 120px;
    height: 120px;
    background: #ddd4d0;
    border-radius: 200% 200% 0% 200%;

    background: radial-gradient(90% 90% at bottom right, #ddd4d0 110%, #fff 130%);

    /* box-shadow: 100px -30px 0 30px #fff; */
}

.four {
    content: '';
    position: absolute;
    top: -250px;
    left: 180px;
    width: 170px;
    height: 255px;
    background: #ddd4d0;
    border-radius: 50% 50% 0% 0%;

    background: radial-gradient(70% 100% at bottom, #ddd4d0 90%, #fff 100%);

}

.five {
    content: '';
    position: absolute;
    top: -180px;
    left: 310px;
    width: 120px;
    height: 200px;
    background: #ddd4d0;
    border-radius: 90% 100% 100% 100%;
    transform: rotate(20deg);
    /* background: radial-gradient(75% 110% at bottom, #ddd4d0 85%, #fff 90%); */

}

.six {
    content: '';
    position: absolute;
    top: -180px;
    left: 180px;
    width: 160px;
    height: 160px;
    background: #ddd4d0;
    border-radius: 50%;
    background: radial-gradient(95% 85% at bottom right, #ddd4d0 120%, #fff 130%);
    /* box-shadow: 100px -30px 0 30px #fff;  */
}


.seven {
    content: '';
    position: absolute;
    top: -115px;
    left: 240px;
    width: 100px;
    height: 100px;
    background: #ddd4d0;
    border-radius: 50%;
    background: radial-gradient(110% 90% at bottom right, #ddd4d0 100%, #fff 130%);
    /* box-shadow: 100px -30px 0 30px #fff; */

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.