/* css for pluey rain <3 */

@keyframes landing {
  85% {
    content: url('images/plueyrain/spr_mike_raindrop.png');
  }
  85.71428571% {
    content: url('images/plueyrain/spr_mike_raindrop_land/3.png');
  }
  
  92.85714286% {
    content: url('images/plueyrain/spr_mike_raindrop_land/2.png');
  }
  
  100% {
    content: url('images/plueyrain/spr_mike_raindrop_land/1.png');
  }
} /* these percentages are genuine nightmare fuel dude */

@keyframes falling {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(110vh);
  }
}

#rainbox{
  position:fixed;
  z-index:-2;
  background-color:#00000000;
  margin:0;padding:0;
  left:0;bottom:0;
  width:100vw;height:100vh;
}

.rain {
  content: url('images/plueyrain/spr_mike_raindrop.png');
  image-rendering: pixelated;
  max-width:500%;
  height:40px;
  position: absolute;
  bottom:110vh;
  animation:1.2s falling cubic-bezier(.42,0,1,1) forwards, 1.4s landing steps(4, end) forwards;
  z-index:-1;
}