.birdArea{
  animation-name: fly;
  animation-duration: 15s; 
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.letter{
  padding-top: 50px;
  margin-left: -15px;
  width: 37px;
  height: 37px;
  background-color: #e5df94;
}

.bird{
  transform: rotate(-15deg);
  animation-name: flutter;
  animation-duration: 2s; 
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.beak1{
  margin-top: -10px;
  margin-left: -2px;
  border-radius: 50% 0% 0% 20%;
  background-color: var(--color-primary);
  height: 7px;
  width: 7px;
}
.beak2{
  border-radius: 0% 0% 0% 30%;
  background-color: var(--color-primary);
  height: 5px;
  width: 5px;
}

.birdBody{
  margin-top: -21px;
  margin-left: 3px;
  border-radius: 48% 52% 48% 52% / 39% 35% 65% 61% ;
  background-color: var(--color-secondary ) ;
  height: 50px;
  width: 37px;
}
.eye{
  margin-top: -41px;
  margin-left: 9px;
  background-color: snow;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.pupil{
  margin-top: -4px;
  margin-left: 9px;
  background-color: 	gray;
  width: 5px;
  height: 5px;
  border-radius: 50% ;
  top: 2px;
}

.wing{
  margin-top: 0px;
  margin-left: 15px;
  width: 37px;
  height: 37px;
  background-color: #ff0081;
  border-radius: 38% 62% 6% 94% / 26% 75% 25% 74%;
  transform-origin: top left;
  animation: flap 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

.hair{
    width:7px;
    height: 7px;
    background-color: transparent;
    position: absolute;
    margin-top: 24px;
    margin-left: 28px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    box-shadow: 1px 2px 0px 0px dodgerblue;
    border-radius: 50%;
   transform: rotate(45deg);
 }

  
@keyframes flap{
  from {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(12deg);
  }
}


@keyframes flutter{
  from {
    transform: rotate(-20deg) translateY(-10px);
  }
  to {
    transform: rotate(0deg) translateY(10px);
  }
}

@keyframes fly {
  0%  {
    transform: translateX(120vw);
  }
	100% {
    transform: translateX(-20vw);
  }
}


#cloudWrapper {
    text-align: center;
    background: linear-gradient(to bottom, #2bc0e4, #eaecc6);
    position: relative;
    height: 624px;
}

 #cloudWrapper .ktfCloudFeedback {
	 background: #fff;
	 border-radius: 100px;
	 box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 15px 0px rgba(0, 0, 0, 0.1);
	 height: 80px;
	 width: 250px;
	 position: relative;
	 z-index: 5;
}
 #cloudWrapper .ktfCloudFeedback:after, #cloudWrapper .ktfCloudFeedback:before {
	 background: #fff;
	 content: '';
	 position: absolute;
	 z-indeX: 1;
	 box-shadow: inset 0px 1px 1px 0px rgba(33, 33, 33, 0.1);
}
 #cloudWrapper .ktfCloudFeedback:after {
	 border-radius: 100px;
	 height: 100px;
	 left: 30px;
	 top: -30px;
	 width: 100px;
}
 #cloudWrapper .ktfCloudFeedback:before {
	 border-radius: 200px;
	 width: 130px;
	 height: 130px;
	 right: 20px;
	 top: -70px;
}
 .ktfCloudFeedback:nth-of-type(1) {
	 top: 55vh;
	 transform: scale(0.5);
	 animation: moveCloud1 47s linear infinite;
}
 @keyframes moveCloud1 {
	 0% {
		 left: -791px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(2) {
	 top: 16vh;
	 transform: scale(0.9);
	 animation: moveCloud2 74s linear infinite;
}
 @keyframes moveCloud2 {
	 0% {
		 left: -94px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(3) {
	 top: 71vh;
	 transform: scale(0.1);
	 animation: moveCloud3 69s linear infinite;
}
 @keyframes moveCloud3 {
	 0% {
		 left: -643px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(4) {
	 top: 30vh;
	 transform: scale(0.2);
	 animation: moveCloud4 59s linear infinite;
}
 @keyframes moveCloud4 {
	 0% {
		 left: -569px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(5) {
	 transform: scale(0.1);
	 animation: moveCloud5 67s linear infinite;
}
 @keyframes moveCloud5 {
	 0% {
		 left: -164px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(6) {
	 transform: scale(0.1);
	 animation: moveCloud6 58s linear infinite;
}
 @keyframes moveCloud6 {
	 0% {
		 left: -544px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(7) {
	 transform: scale(0.7);
	 animation: moveCloud7 31s linear infinite;
	 top: -15vh;
}
 @keyframes moveCloud7 {
	 0% {
		 left: -473px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(8) {
     top: -65vh;
	 transform: scale(0.7);
	 animation: moveCloud8 72s linear infinite;
}
 @keyframes moveCloud8 {
	 0% {
		 left: -7px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}
 .ktfCloudFeedback:nth-of-type(9) {
     top: -58vh;
	 transform: scale(0.6);
	 animation: moveCloud9 38s linear infinite;
}
 @keyframes moveCloud9 {
	 0% {
		 left: -491px;
	}
	 100% {
		 left: calc(100vw + 400px);
	}
}