@keyframes moneyRain {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes pillColor {
  0%, 100% {
    color: black;
  }
  50% {
    color: white;
  }
}

.money-rain,
.time-rain,
.pill-rain,
.tear-rain {
  position: fixed;
  top: 0;
  left: var(--x-pos);
  font-size: var(--size);
  pointer-events: none;
  z-index: 10;
  animation: moneyRain var(--fall-duration) linear forwards;
}

.money-rain {
  font-family: monospace;
  color: var(--shade);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.time-rain {
  color: var(--shade);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  filter: contrast(200%) grayscale(100%);
  opacity: 0.7;
}

.pill-rain {
  color: var(--shade);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  transform: rotate(90deg);
  filter: grayscale(100%) contrast(1000%);
  opacity: 0.7;
}

.tear-rain {
  color: var(--shade);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  filter: grayscale(100%) contrast(200%);
}