html,
body {
  min-height: 100vh;
  width: 100%;
  background-color: black;
  overflow: hidden;
}

#draw {
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%;
}
#draw svg {
  min-height: 100vh;
}
#draw * {
  transform-origin: center;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
#draw .cloud,
#draw #baloons,
#draw #birds,
#draw #birds-paradise,
#draw #sky {
  transition-duration: 14s;
}
#draw #whitesun > path {
  transition-duration: 4s;
}
#draw #land1,
#draw #land2,
#draw #whitesun,
#draw #land3,
#draw #glow {
  transition-duration: 4s;
}
#draw #land1 {
  transform: translateY(-10%) scale(1.3);
}
#draw #land2,
#draw #whitesun {
  transform: translateY(-8%) scale(1.2);
}
#draw #land3 {
  transform: translateY(-10%) scale(1.3);
}
#draw #c-left1,
#draw #c-left2,
#draw #c-left3 {
  transform: translateX(-20%) translateY(-10%) scale(1.5);
  opacity: 0.01;
}
#draw #c-right1,
#draw #c-right2,
#draw #c-right3 {
  transform: translateX(20%) translateY(-10%) scale(1.5);
  opacity: 0.01;
}
#draw #baloons,
#draw #birds-paradise {
  transform: translateX(-5%) translateY(-5%) scale(1.2);
}
#draw #birds {
  transform: translateX(5%) translateY(-5%) scale(1.2);
}
#draw #sky {
  transform: translateY(30%);
}
#draw #whitesun > path {
  opacity: 0.5;
}
#draw.animate #land1,
#draw.animate #land2,
#draw.animate #whitesun,
#draw.animate #land3,
#draw.animate #sky,
#draw.animate #glow {
  transform: translateX(0%) translateY(0%) scale(1);
}
#draw.animate .cloud,
#draw.animate #baloons,
#draw.animate #birds,
#draw.animate #birds-paradise {
  transform: translateX(0%) translateY(0%) scale(1) !important;
}
#draw.animate .cloud {
  opacity: 0.15 !important;
}