.area{
  height:100vh;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.area.guest-bg-dark{
  background: #54bcb5;
  background: -webkit-linear-gradient(to left, #a2e9e3, #54bcb5);  
}
.area.guest-bg-light{
  background: #c6f3ee;
  background: -webkit-linear-gradient(to left, #c6f3ee , #b0ece7);  
}

.circles{
  height: 100%;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.circles li{
  animation: animate 25s linear infinite;
  bottom: -150px;
  display: block;
  height: 20px;
  list-style: none;
  position: absolute;
  width: 20px;
}

.area.guest-bg-dark .circles li{
  background: rgba(255, 255, 255, 0.2);
}

.area.guest-bg-light .circles li{
  background: rgba(84, 188, 181, 0.5);
}

.circles li:nth-child(1){ animation-delay: 0s; height: 80px; left: 25%; width: 80px; }
.circles li:nth-child(2){ animation-delay: 4s; animation-duration: 12s; height: 24px; left: 10%; width: 24px; }
.circles li:nth-child(3){ animation-delay: 4s; height: 16px; left: 70%; width: 16px; }
.circles li:nth-child(4){ animation-delay: 8s; animation-duration: 16s; height: 64px; left: 40%; width: 64px; }
.circles li:nth-child(5){ animation-delay: 0s; height: 24px; left: 65%; width: 24px; }
.circles li:nth-child(6){ animation-delay: 4s; height: 110px; left: 75%; width: 120px; }
.circles li:nth-child(7){ animation-delay: 8s; height: 98px; left: 35%; width: 98px; }
.circles li:nth-child(8){ animation-delay: 12s; animation-duration: 48s; height: 32px; left: 50%; width: 32px; }
.circles li:nth-child(9){ animation-delay: 8s; animation-duration: 36s; height: 16px; left: 20%; width: 16px; }
.circles li:nth-child(10){ animation-delay: 0s; animation-duration: 12s; height: 180px; left: 85%; width: 180px; }
.circles li:nth-child(11){ animation-delay: 12s; height: 64px; left: 8%; width: 64px; }
.circles li:nth-child(12){ animation-delay: 10s; height: 72px; left: 35%; width: 72px; }
.circles li:nth-child(13){ animation-delay: 0s; animation-duration: 12s; height: 32px; left: 16%; width: 32px; }
.circles li:nth-child(14){ animation-delay: 2s; animation-duration: 64s; height: 16px; left: 36%; width: 16px; }
.circles li:nth-child(15){ animation-delay: 0s; height: 72px; left: 24%; width: 72px; }
.circles li:nth-child(16){ animation-delay: 4s; animation-duration: 12s; height: 80px; left: 12%; width: 80px; }

@keyframes animate {
  0%{ border-radius: 8%; opacity: 1; transform: translateY(-1000px) rotate(0deg); }
  100%{ border-radius: 50%; opacity: 0; transform: translateY(0) rotate(720deg); }
}