.flash {
/*   animation: flash 1.0s infinite; */
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}
.skew {
  animation: skew 10s infinite;
}
@keyframes skew {
  0% {
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(15deg);
  }
  33.6% {
    transform: skewX(-15deg);
  }
  33.9% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(5deg);
  }
  66.6% {
    transform: skewX(-5deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(10deg);
  }
  77.6% {
    transform: skewX(-10deg);
  }
  77.9% {
    transform: none;
  }
}
.glitch {
  animation: glitch 25s both infinite;
}
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  12.5% {
    transform: translate(-0.5px, 0.5px);
  }
  37.5% {
    transform: translate(-0.5px, -0.5px);
  }
  62.5% {
    transform: translate(0.5px, 0.5px);
  }
  87.5% {
    transform: translate(0.5px, 0.5px);
  }
  100% {
    transform: translate(0);
  }
}

#lightning-area {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #303030;
}

#lightning-canvas{
  position: relative;
  width: 100%;
  height: 100%;

}