*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-image: url('https://images.unsplash.com/photo-1579728887026-6fe67a8f9165?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 1s);
          animation-delay: calc(var(--d) * 1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
          animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 30px;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
}
.rain__drop path {
  fill: #a1c6cc;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}