.rain {
  position: fixed;       
  top: 8vh;
  display: flex;
  z-index: 1;
  padding: 0 20px;
}

.rain span {
  position: relative;
  bottom: 10px;
  width: 4px;
  height: 4px;    
  background-color: #fff;
  margin: 0 2px;
  border-radius: 50%;
  animation: animate 5s linear infinite;    
  animation-duration: calc(30s / var(--i));
  transform-origin: bottom;
}

.cloud-logo {
  color:#fff; 
  position: fixed;    
  text-align: center;         
  font-family: "Monoton", sans-serif;
  font-weight: 400;
  font-size: 3em;
  font-style: normal;
}

@keyframes animate {
  0% {
      transform: translateY(0) scale(1);
  }
  70% {
      transform: translateY(87vh) scale(1);
  }
  100% {
      transform: translateY(87vh) scale(0);
  }
}