Анимированное поздравление для сайта на Хеллоуин

Анимированное поздравление для сайта  на Хеллоуин в виде движущихся тыкв на фоне неба и облаков где летит ведьма на метле. Данным украшением можно украсить ваш веб проект на Хеллоуин. Снипет сделан на HTML и CSS.

HTML

<div class="container11">
    <div class="moon"></div>
    <img src="https://clipart-library.com/img1/708832.png" width="192" height="120" class="witch"><!--  img from clipart.com  -->
    <div class="cloud cloud1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="cloud cloud2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="cloud cloud3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="cloud cloud4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <p class="pumpkin pumpkin-1">🎃</p>
    <p>
    <p class="pumpkin pumpkin-2">🎃</p>
    <p>
    <p class="pumpkin pumpkin-3">🎃</p>
    <p>
        <span class="happy pt-2"> Happy</span><br>
        <span class="halloween">Halloween</span>
    </p>
</div>

CSS

/* container */
.container11 {
    font-size: 100%;
    background-image: linear-gradient(#050227, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    gap: 0;
    z-index: -10;
}

/* text */
.happy {
    font-size: 10.5vw;
    letter-spacing: 0.9vw;
    margin-bottom: -0.25em;
}

.halloween {
    font-size: 12.5vw;
}

.happy,
.halloween {
    font-family: "Butcherman", sans-serif;
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.6), 2px 4px 8px rgba(0, 0, 0, 0.3),
        2px 4px 15px rgba(0, 0, 0, 0.2), 2px 4px 18px rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 165, 0);
    background-image: url('dаta:image/svg+xml,%3Csvg width="52" height="30" viewBox="10 10 50 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23FF0000" fill-opacity="0.8"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 1.45;
    display: inline-block;
    text-transform: uppercase;
    z-index: 5;
    animation: rise 8s linear;
}

/* text animation */
@keyframes rise {
    0% {
        background-color: rgb(255, 165, 0);
        opacity: 0;
    }

    100% {
        background-color: rgb(255, 165, 0);
        background-image: url('dаta:image/svg+xml,%3Csvg width="52" height="30" viewBox="10 10 50 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23FF0000" fill-opacity="0.8"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.6), 2px 4px 8px rgba(0, 0, 0, 0.3),
            2px 4px 15px rgba(0, 0, 0, 0.2), 2px 4px 18px rgba(0, 0, 0, 0.1);
        opacity: 1;
    }
}

/* moon */
.moon {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 35em;
    height: 35em;
    background-image: radial-gradient(circle, #e0e0e0 10%, #000 80%);
    border-radius: 50%;
    z-index: -3;
    animation: moonMove 480s linear infinite;
}

/* moon animation */
@keyframes moonMove {
    0% {
        transform: translate(0);
    }
    50% {
        transform: translate(50vw, 5vw);
    }
    100% {
    transform: translate(120vw, -20vh);
    }
}

/* witch */
.witch {
    width: 10vw;
    height: auto;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: -2;
    animation: fly 20s linear infinite;
}

/* witch animation */
@keyframes fly {
    0% {
        transform: translateX(-20vw);
    }
    100% {
        transform: translateX(110vw);
    }
}

/* cloud */
.cloud {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.cloud div {
    background-image: radial-gradient(
        ellipse at center,
        rgba(249, 249, 249, 0.9),
        rgba(200, 200, 200, 0.9),
        rgba(180, 180, 180, 1),
        transparent
    );
    border-radius: 50%;
    height: 7em;
    width: 10em;
    position: absolute;
}

/* cloud1 */
.cloud1 div:nth-child(1) {
    top: 16em;
    left: 3em;
}

.cloud1 div:nth-child(2) {
    top: 18em;
    left: 0;
}

.cloud1 div:nth-child(3) {
    top: 16em;
    left: -3em;
}

.cloud1 div:nth-child(4) {
    top: 15em;
    left: 5em;
}

.cloud1 div:nth-child(5) {
    top: 17em;
    left: 7em;
}

.cloud1 {
    animation: cloudMove1 50s linear infinite alternate;
}

/* cloud2 */
.cloud2 div:nth-child(1) {
    top: 3em;
    left: 2em;
}

.cloud2 div:nth-child(2) {
    top: 5em;
    left: 6em;
}

.cloud2 div:nth-child(3) {
    top: 2em;
    left: 9em;
}

.cloud2 div:nth-child(4) {
    top: 4em;
    left: 4em;
}

.cloud2 div:nth-child(5) {
    top: 4em;
    left: 13em;
}

.cloud2 {
    animation: cloudMove1 180s linear infinite alternate;
}

/* cloud1 and cloud2 animation */
@keyframes cloudMove1 {
    0% {
        transform: translateX(-20vw);
    }
    100% {
        transform: translateX(110vw);
    }
}

/* cloud3 */
.cloud3 div:nth-child(1) {
    top: 10em;
    right: -1em;
}

.cloud3 div:nth-child(2) {
    top: 13em;
    right: 1em;
}

.cloud3 div:nth-child(3) {
    top: 12em;
    right: 3em;
}

.cloud3 div:nth-child(4) {
    top: 12.5em;
    right: 5;
}

.cloud3 div:nth-child(5) {
    top: 14em;
    right: 6em;
}

.cloud3 {
    animation: cloudMove3 160s linear infinite alternate;
}

/* cloud4 */
.cloud4 div:nth-child(1) {
    top: -1em;
    right: -5em;
}

.cloud4 div:nth-child(2) {
    top: 1em;
    right: -2em;
}

.cloud4 div:nth-child(3) {
    top: 2em;
    right: 0;
}

.cloud4 div:nth-child(4) {
    top: -1em;
    right: 2.5em;
}

.cloud4 div:nth-child(5) {
    top: 2em;
    right: 4em;
}
.cloud4 div:nth-child(6) {
    top: 0em;
    right: 6em;
}

.cloud4 {
    animation: cloudMove3 90s linear infinite alternate;
}

/* cloud3 and cloud4 animation */
@keyframes cloudMove3 {
    0% {
        transform: translateX(120vw);
    }
    100% {
        transform: translateX(-20vw);
    }
}

/* pumpkin */
.pumpkin {
    position: absolute;
    left: -20vw;
    bottom: 0;
    transform-origin: center bottom;
}
.pumpkin-1 {
    font-size: 12vw;
    animation: bounce 0.5s infinite alternate, shadow 0.5s infinite alternate,
        moving 10s infinite alternate;
    animation-delay: 2s;
    z-index: 3;
}

.pumpkin-2 {
    font-size: 8vw;
    animation: bounce2 0.6s infinite alternate, shadow 0.5s infinite alternate,
        moving 10s infinite alternate;
}

.pumpkin-3 {
    font-size: 10vw;
    animation: bounce3 0.5s infinite alternate, shadow 0.5s infinite alternate,
        moving 12s infinite alternate;
    animation-delay: 3s;
}

/* pumpkin animation */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-8vw);
    }
}

@keyframes bounce2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15vw);
    }
}

@keyframes bounce3 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-12vw);
    }
}

@keyframes shadow {
    0% {
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5),
            -4px -4px 12px rgba(255, 172, 28, 0.3);
    }
    100% {
        text-shadow: 0 8px 12px rgba(0, 0, 0, 1),
            -4px -4px 20px rgba(255, 172, 28, 0.2);
    }
}

@keyframes moving {
    0% {
        left: -15vw;
    }
    100% {
        left: 105vw;
    }
}