html {
		background-color:#F5F5DC;
		
		background-blend-mode: luminosity;
		background-repeat: no-repeat;
		background-size: cover;
		width: 99vw;
		height: 94vh;
}

.balloon {
  display:inline-block;
   width:120px;
  height:145px;
  background:hsl(215,50%,65%);
  border-radius:80%;
  position:relative;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  margin:20px 30px;
  transition:transform 0.5s ease;
  z-index:10;
  animation:balloons 4s ease-in-out infinite;
  transform-origin:bottom center;
}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}


.balloon:before {
  content:"▲";
  font-size:20px;
  color:hsl(215,30%,50%);
  display:block;
  text-align:center;
  width:100%;
  position:absolute;
  bottom:-12px;
  z-index:-100;
}

.balloon:after {
 display:inline-block; top:153px;
  position:absolute;
  height:250px;
  width:1px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2); 
}

.balloon:nth-child(4){ background:hsl(245,40%,65%); animation-duration:3.5s; }
.balloon:nth-child(4):before { color:hsl(245,40%,65%);  }

.balloon:nth-child(5){ background:hsl(139,50%,60%); animation-duration:3s; }
.balloon:nth-child(5):before { color:hsl(139,30%,50%);  }

.balloon:nth-child(6){ background:hsl(59,50%,58%); animation-duration:4.5s; }
.balloon:nth-child(6):before { color:hsl(59,30%,52%);  }

.balloon:nth-child(7){ background:hsl(23,55%,57%); animation-duration:5s; }
.balloon:nth-child(7):before { color:hsl(23,44%,46%);  }

.flier {
	pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
	scale: 0.5;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) 
	}

	15% {
		transform: translateX(100vw) translateY(-100%) 
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) 
	}

	40% {
		transform: translateX(-200%) translateY(3vh) 
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) 
	}

	65% {
		transform: translateX(100vw) translateY(50vh) 
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) 
	}

	95% {
		transform: translateX(10vw) translateY(100vh)
	}
}