body {
	background-color: #00b4ff;
        background-image: url("ffp.webp");
        background-size:cover;
        color: #333;
        font: 100% Arial, Sans Serif;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
}

#background-wrap {
    bottom: 0;
        left: 0;
        padding-top: 50px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: -1;
}

.lwrap img{
    margin: 40px auto;
    display: block;
    max-width: 80%;
}


.cloud {
        background: #fff;
        background: linear-gradient(to bottom,  #fff 5%,#f1f1f1 100%);
        border-radius: 50px;
        box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

        height: 40px;
        position: relative;
        width: 170px;
}

.cloud:after, .cloud:before {
    background: #fff;
        content: '';
        position: absolute;
        z-indeX: -1;
}

.w404 .cloud, .w404 .cloud:after, .w404 .cloud:before{
         background: #999999;
}


.cloud:after {
        border-radius: 50px;
        height: 50px;
        left: 25px;
        top: -25px;
        width: 50px;
}

.cloud:before {
        border-radius: 200px;
        width: 80px;
        height: 80px;
        right: 25px;
        top: -45px;
}

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

.x1 {
        animation: animateCloud 35s linear infinite;
        transform: scale(0.5);
}

.x2 {
        animation: animateCloud 40s linear infinite;
        transform: scale(0.1);
}

.x3 {
        animation: animateCloud 30s linear infinite;
        transform: scale(0.35);
}

.x4 {
        animation: animateCloud 38s linear infinite;
        transform: scale(1);
}

.x5 {
        animation: animateCloud 25s linear infinite;
        transform: scale(0.25);
}