*{
    box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #87ceeb, #e0f6ff);
}

.sky {
  position: relative;
  width: 100vw;
  height: 100vh;
} 

.cloud {
  position: absolute;
  background: white;
  border-radius: 50px;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}


.cloud1 {
  width: 200px;
  height: 60px;
  top: 20%;
  animation: moveCloud 30s linear infinite;
}

.cloud1::before {
  width: 100px;
  height: 100px;
  top: -40px;
  left: 20px;
}

.cloud1::after {
  width: 120px;
  height: 120px;
  top: -50px;
  right: 20px;
}

.cloud2 {
  width: 150px;
  height: 50px;
  top: 50%;
  animation: moveCloud 45s linear infinite;
}

.cloud2::before {
  width: 100px;
  height: 100px;
  top: -40px;
  left: 20px;
}


.cloud3 {
  width: 250px;
  height: 70px;
  top: 70%;
  animation: moveCloud 70s linear infinite;
}

.cloud3::before {
  width: 100px;
  height: 100px;
  top: -40px;
  left: 20px;
}

.cloud3::after {
  width: 120px;
  height: 120px;
  top: -50px;
  right: 20px;
}


@keyframes moveCloud {
  from {
    transform: translateX(-300px);
  }
  to {
    transform: translateX(110vw);
  }
}