/* Stylesheet */

.cloud {
  width: auto !important;
  position: absolute;
  animation-name: clouds;
  animation-direction: forwards;
  animation-fill-mode: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: 1;
}

.cloud-1 {
  top: 40%;
  left: 0;
  animation-duration: 11s;
}

.cloud-2 {
  top: 20%;
  left: 0;
  animation-duration: 19s;
}

.butterfly {
  position:absolute;
  height:auto;
  z-index: 2;
}

.butterfly-1 {
  left:16vw;
  bottom:18vh;
  width:50px;
}

.butterfly-2 {
  right:22vw;
  bottom:21vh;
  width:50px;
  transform: rotate(190deg);
}

@keyframes clouds {
 
  0% { transform: translatex(-400px); }
  100% { transform: translatex(110vw); }
  
}