html {
  padding: 0;
  margin: 0;
}
.balloon-wrapper {
  position: fixed;
  top: calc(50% + var(--balloon-top-offset, 0px));
  left: calc(50% + var(--balloon-offset, 0px));
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.balloon {
  width: 120px;
  height: 160px;
  display: block;
  animation: balloon-float var(--balloon-duration, 6s) ease-in-out infinite;
  animation-delay: var(--balloon-delay, 0s);
  animation-fill-mode: both;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
  transform: translateY(40px) rotate(-2deg) scale(var(--balloon-scale, 1));
  will-change: transform;
}

@keyframes balloon-float {
  0% {
    transform: translateY(40px) rotate(-2deg) scale(var(--balloon-scale, 1));
  }
  50% {
    transform: translateY(-20px) rotate(3deg) scale(var(--balloon-scale, 1));
  }
  100% {
    transform: translateY(40px) rotate(-1deg) scale(var(--balloon-scale, 1));
  }
}

@media (min-width: 768px) {
  .balloon {
    width: 140px;
    height: 190px;
  }
}
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  color: #34495e;
}

body {
  height: 100%;
  background: linear-gradient(to left bottom, hsl(113, 100%, 85%) 0%,hsl(163, 100%, 85%) 100%);
}