:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
}
body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  backdrop-filter: brightness(.4);
  animation: rain 2s 3;

  
}
.rain {
  height: 100%;
  background: url(rain.png);
  animation: rain .8s linear 10;
}
@keyframes rain {
  0% {background-position: 0 0;}
  100% {background-position: -100% -100%;}
}
@keyframes lightning {
  0% {backdrop-filter: brightness(0.4);}
  10% {backdrop-filter: brightness(0.6);}
  18% {backdrop-filter: brightness(1);}
  25% {backdrop-filter: brightness(.4);}
  40% {backdrop-filter: brightness(0.4);}
  45% {backdrop-filter: brightness(0.6);}
  48% {backdrop-filter: brightness(1);}
  55% {backdrop-filter: brightness(.4);}
  90% {backdrop-filter: brightness(.4);}
  92% {backdrop-filter: brightness(0.6);}
  98% {backdrop-filter: brightness(1);}
  100% {backdrop-filter: brightness(.4);}

  
}