.biggest-cloud {
  animation: move 40s linear infinite;
}
.pink-cloud-2 {
  animation: move 40s 3s linear infinite;
  opacity: 0;
}
.pink-center-cloud {
  animation: move 40s 20s linear infinite;
  opacity: 0;
}

@keyframes move {
  0% {
    opacity: 0;
  }
  25% {
    transform: translate(30%);
    opacity: 0.9;
  }

  50% {
    transform: translate(60%);
    opacity: 1;
  }
  100% {
    transform: translate(100%);
    opacity: 0.5;
  }
}
.pink-cloud-1 {
  animation: move1 40s 20s linear infinite;
  opacity: 0;
}
.sun-cloud {
  animation: move1 40s 15s linear infinite;
  opacity: 0;
}
.cloud-right {
  animation: move1 45s 10s linear infinite;
  opacity: 0;
}
.cloud-center {
  animation: move1 50s 20s linear infinite;
  opacity: 0;
}
.blue-cloud {
  animation: move1 50s 20s linear infinite;
  opacity: 0;
}

@keyframes move1 {
  0% {
    transform: translate(-30%);
    opacity: 0;
  }
  25% {
    transform: translate(0%);
    opacity: 0.3;
  }
  50% {
    transform: translate(30%);
    opacity: 0.5;
  }
  100% {
    transform: translate(60%);
    opacity: 1;
  }
}

.sun {
  animation: sunshine 10s ease-in infinite;
  /* opacity: 0; */
}

@keyframes sunshine {
  from {
    filter: drop-shadow(0px 0px 1px #ffd249);
  }
  to {
    filter: drop-shadow(0px 0px 10px #ffd249);
  }
}

.leaf-on-earth-left-1 {
  transform-origin: 120px 100px;
  animation: wave1 4.5s 1s ease-in infinite;
}

.leaf-on-earth-left-2 {
  transform-origin: 120px 100px;
  animation: wave1 5s 1s ease-in infinite;
}

.leaf-on-earth-left-3 {
  transform-origin: 120px 100px;
  animation: wave1 5.5s 0.5s ease-in infinite;
}

.leaf-on-earth-right-1 {
  transform-origin: 160px 100px;
  animation: wave2 5s ease-in infinite;
}
.leaf-on-earth-right-2 {
  transform-origin: 160px 100px;
  animation: wave2 5.5s 0.5s ease-in infinite;
}
.leaf-on-earth-right-3 {
  transform-origin: 160px 100px;
  animation: wave2 4.5s 1s ease-in infinite;
}

.tree {
  transform-origin: 160px 100px;
  animation: wave 4.5s 1s ease-in infinite;
}

@keyframes wave1 {
  0%,
  100% {
    transform: rotateX(20deg);
    transform-origin: 120px 95px;
  }
  50% {
    transform: rotateY(25deg);
    transform-origin: 119px 90px;
  }
}

@keyframes wave2 {
    0%,
    100% {
      transform: rotateX(15deg);
      transform-origin: 155px 95px;
    }
    50% {
      transform: rotateY(20deg);
      transform-origin: 150px 90px;
    }
  }
  
.sun-line {
  transform-origin: 165px 53px;
  filter: drop-shadow(0px 0px 1px #ffd249);
  animation: shine 4s ease-in infinite;
}

@keyframes shine {
  /* 0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    } */
  0%,
  100% {
    transform: scale(0);
    filter: drop-shadow(0px 0px 1px #ffd249);
  }
  50%,
  80%,
  90% {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px #ffd249);
  }
}

/* 
0%, 100% { transform: rotateX(10deg) },
50% { transform: rotateY(5deg) } */

.mouth {
  /* opacity: 1; */

  animation: smile 5s linear infinite;
  transform-origin: 80px 80px;
}

@keyframes smile {
  0%,
  100% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1.3);
  }
}