canvas {
  width: 100%;
  height: 100%;
}
.thunder {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  animation: thunder-bg 15s infinite;
}
canvas {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}
#canvas2 {
  z-index: 10;
}
#canvas1 {
  z-index: 100;
}
@-webkit-keyframes thunder-bg {
  0% {
    filter: brightness(1) blur(6px);
  }
  9% {
    filter: brightness(1) blur(6px);
  }
  10% {
    filter: brightness(1.4) blur(6px);
  }
  12.5% {
    filter: brightness(1) blur(6px);
  }
  80% {
    filter: brightness(1) blur(6px);
  }
  82% {
    filter: brightness(1.4) blur(6px);
  }
  83% {
    filter: brightness(1) blur(6px);
  }
  83.5% {
    filter: brightness(1.4) blur(6px);
  }
  87% {
    filter: brightness(1) blur(6px);
  }
  100% {
    filter: brightness(1) blur(6px);
  }
}