html {
 margin: 0;
  width: 100%;
  height: 100%;
}
body {
 margin: 0;
  width: 100%;
  height: 100%;
}

.baloon_container {
  /* width: 100%; */
  /* height: 420px; */
  /* padding: 10px; */
  margin: 0 auto;
}
.balloon {

width: 100%;

padding-top: 20px;

/* position: relative; */
}



.bal1 {
   /* border-bottom-color: rgba(182, 15, 97, 0.9); */
   background-color: rgba(182, 15, 97, 0.9);
   left: 0;
   /* background-image: url(1.png); */
   background-size: 100% 100%;
   /* box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.9); */
   /* -webkit-animation: balloon1 6s ease-in-out infinite; 
  -moz-animation: balloon1 6s ease-in-out infinite;
  -o-animation: balloon1 6s ease-in-out infinite;
  /* animation: balloon1 6s ease-in-out infinite; */
}
.bal1:before {
  color: rgba(182, 15, 97, 0.9);
}
.bal2 {
  /* background-image: url(2.png); */
  background-size: 100% 100%;
  background-color: rgba(242, 112, 45, 0.9);
  left: 0;
  /* border-bottom-color: rgba(242, 112, 45, 0.9); */
  /* left: 120px; */
  /* box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.9); */
  /* -webkit-animation: balloon2 6s ease-in-out infinite; 
  -moz-animation: balloon2 6s ease-in-out infinite;
  -o-animation: balloon2 6s ease-in-out infinite;
  /* animation: balloon2 6s ease-in-out infinite; */
  }
.bal2:before {
  color: rgba(242, 112, 45, 0.9);
}
.bal3 {
  /* background-image: url(3.png); */
  background-size: 100% 100%;
  background-color: rgba(45, 181, 167, 0.9);
  left: 0;
  /* border-bottom-color: rgba(45, 181, 167, 0.9); */
  /* left: 240px;*/
  /* box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.9); */
  /* -webkit-animation: balloon4 6s ease-in-out infinite; */
  /* -moz-animation: balloon4 6s ease-in-out infinite;
  /*-o-animation: balloon4 6s ease-in-out infinite;
  /* animation: balloon4 6s ease-in-out infinite; */
  }
.bal3:before {
  color: rgba(45, 181, 167, 0.9);
}
.bal4 {
     
     background-size: 100% 100%;
  background-color: rgba(190, 61, 244, 0.9);
     /*
 left: 360px;*/
     /* box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.9); */
     /*-webkit-animation: balloon1 5s ease-in-out infinite;
  -moz-animation: balloon1 5s ease-in-out infinite;
  -o-animation: balloon1 5s ease-in-out infinite;
  animation: balloon1 5s ease-in-out infinite;*/
     /* border: 2px solid grey; */
}
.bal4:before {
  color: rgba(190, 61, 244, 0.9);
}
.bal5 {
  background-color: rgba(180, 224, 67, 0.9);
  left: 480px;
  box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.9);
  /*-webkit-animation: balloon3 5s ease-in-out infinite;
  -moz-animation: balloon3 5s ease-in-out infinite;
  -o-animation: balloon3 5s ease-in-out infinite;
  animation: balloon3 5s ease-in-out infinite;*/
}
.bal5:before {
  color: rgba(180, 224, 67, 0.9);
}
.balloon > div:nth-child(6) {
  background-color: rgba(242, 194, 58, 0.9);
  left: 600px;
  box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.9);
  -webkit-animation: balloon2 3s ease-in-out infinite;
  -moz-animation: balloon2 3s ease-in-out infinite;
  -o-animation: balloon2 3s ease-in-out infinite;
  animation: balloon2 3s ease-in-out infinite;
}
.balloon > div:nth-child(6):before {
  color: rgba(242, 194, 58, 0.9);
}


/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(-6deg);
  }
  50% {
    -webkit-transform: translateY(-20px) rotate(8deg);
  }
}
@-moz-keyframes balloon1 {
  0%,
  100% {
    -moz-transform: translateY(0) rotate(-6deg);
  }
  50% {
    -moz-transform: translateY(-20px) rotate(8deg);
  }
}
@-o-keyframes balloon1 {
  0%,
  100% {
    -o-transform: translateY(0) rotate(-6deg);
  }
  50% {
    -o-transform: translateY(-20px) rotate(8deg);
  }
}
@keyframes balloon1 {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-20px) rotate(8deg);
  }
}
/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(6eg);
  }
  50% {
    -webkit-transform: translateY(-30px) rotate(-8deg);
  }
}
@-moz-keyframes balloon2 {
  0%,
  100% {
    -moz-transform: translateY(0) rotate(6deg);
  }
  50% {
    -moz-transform: translateY(-30px) rotate(-8deg);
  }
}
@-o-keyframes balloon2 {
  0%,
  100% {
    -o-transform: translateY(0) rotate(6deg);
  }
  50% {
    -o-transform: translateY(-30px) rotate(-8deg);
  }
}
@keyframes balloon2 {
  0%,
  100% {
    /* transform: translateY(0) rotate(6deg); */
  }
  50% {
    /* transform: translateY(-30px) rotate(-8deg); */
  }
}
/* BAllOON 0*/
@-webkit-keyframes balloon3 {
  0%,
  100% {
    -webkit-transform: translate(0, -10px) rotate(6eg);
  }
  50% {
    -webkit-transform: translate(-20px, 30px) rotate(-8deg);
  }
}
@-moz-keyframes balloon3 {
  0%,
  100% {
    -moz-transform: translate(0, -10px) rotate(6eg);
  }
  50% {
    -moz-transform: translate(-20px, 30px) rotate(-8deg);
  }
}
@-o-keyframes balloon3 {
  0%,
  100% {
    -o-transform: translate(0, -10px) rotate(6eg);
  }
  50% {
    -o-transform: translate(-20px, 30px) rotate(-8deg);
  }
}
@keyframes balloon3 {
  0%,
  100% {
    transform: translate(0, -10px) rotate(6eg);
  }
  50% {
    transform: translate(-20px, 30px) rotate(-8deg);
  }
}
/* BAllOON 3*/
@-webkit-keyframes balloon4 {
  0%,
  100% {
    -webkit-transform: translate(10px, -10px) rotate(-8eg);
  }
  50% {
    -webkit-transform: translate(-15px, 20px) rotate(10deg);
  }
}
@-moz-keyframes balloon4 {
  0%,
  100% {
    -moz-transform: translate(10px, -10px) rotate(-8eg);
  }
  50% {
    -moz-transform: translate(-15px, 10px) rotate(10deg);
  }
}
@-o-keyframes balloon4 {
  0%,
  100% {
    -o-transform: translate(10px, -10px) rotate(-8eg);
  }
  50% {
    -o-transform: translate(-15px, 10px) rotate(10deg);
  }
}
@keyframes balloon4 {
  0%,
  100% {
    transform: translate(10px, -10px) rotate(-8eg);
  }
  50% {
    transform: translate(-15px, 10px) rotate(10deg);
  }
}
h1 {
  position: relative;
  /* top: 200px; */
  text-align: center;
  color: #000;
  /* font-size: 3.5em; */
}