html,
body {
  height: 100%:

}

body {
  margin: 0;
  background-color: #171716;
  color: blue;
}


svg {
  position: absolute;
  height: 100vh;
  width: 100%;
   -webkit-animation: squiggly-anim 0.4s infinite;
          animation: squiggly-anim 0.4s infinite;

}



@keyframes squiggly-anim {
	  0% {
		-webkit-filter: url('#squiggly-0');
				filter: url('#squiggly-0');
	  }
	  25% {
		-webkit-filter: url('#squiggly-1');
				filter: url('#squiggly-1');
	  }
	  50% {
		-webkit-filter: url('#squiggly-2');
	  }
	  75% {
		-webkit-filter: url('#squiggly-3');
				filter: url('#squiggly-3');
	  }
	  100% {
		-webkit-filter: url('#squiggly-4');
				filter: url('#squiggly-4');
	  }
	}





/* raining men */

#man1 {
  transform: translatey(-60px);
  animation: rain 3s linear infinite;
  animation-delay: 2s;
  opacity: 0; 
}

#man2 {
  transform: translatey(-75px);
  animation: rain 3s linear infinite;
  animation-delay: 1s;
  opacity: 0; 
}

#man3 {
  transform: translatey(-215px);
  animation: rain 3s linear infinite;
  animation-delay: 4s;
  opacity: 0; 
}

#man4 {
   transform: translatey(-150px);
  animation: rain 3s linear infinite;
  animation-delay: 2s;
  opacity: 0; 
}

#man5 {
   transform: translatey(-370px);
  animation: rain 3s linear infinite;
  animation-delay: 2.5s;
  opacity: 0; 
}

#man6 {
   transform: translatey(-90px);
  animation: rain 3s linear infinite;
  animation-delay: 1.5s;
  opacity: 0; 
}

#man7 {
   transform: translatey(-110px);
  animation: rain 3s linear infinite;
  animation-delay: 2s;
  opacity: 0; 
}
#man8 {
   transform: translatey(-340px);
  animation: rain 3s linear infinite;
  animation-delay: 3s;
  opacity: 0; 
}
#man9 {
   transform: translatey(-140px);
  animation: rain 3s linear infinite;
  animation-delay: 1s;
  opacity: 0; 
}
#man10 {
   transform: translatey(-240px);
  animation: rain 3s linear infinite;
  animation-delay: 3s;
  opacity: 0; 
}
#man11 {
   transform: translatey(-280px);
  animation: rain 3s linear infinite;
  animation-delay: 3s;
  opacity: 0; 
}
#man12 {
   transform: translatey(-400px);
  animation: rain 3s linear infinite;
  animation-delay: 1s;
  opacity: 0; 
}




@keyframes rain {
  5% {
    opacity: 1;
  }
  100% {
    transform: translatey(700px);
    opacity: 1;
  }
}


#bolt1_1_,
#bolt2_1_,
#bolt3_1_ {
  opacity: 0;
  animation: strike 5s linear infinite;
  animation-delay: 0.5s;
}

#bolt1_1_ {
  animation-delay: 2s;
}

#bolt2_1_ {
  animation-delay: 1s;
}

@keyframes strike {
 
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
    
  }
  
  20% {
    opacity: 0
  }
    
  
}