html {
  background: #112;
}

#sky {
  animation: sky 4s ease-in-out infinite;
  background: url(../images/df.webp) 0 0 / cover no-repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
#sky svg {
  animation: lightning 4s ease-in-out infinite;
  left: 50%;
  max-height: 100vh;
  max-width: 100vw;
  position: fixed;
  top: 0;
  transform: translateX(-30%);
}

@keyframes lightning {
  0% { opacity: 0; }
  15% { opacity: 0.8; }
  20% { opacity: 0.1; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sky {
  0% { opacity: 0.4; }
  15% { opacity: 0.8; }
  20% { opacity: 0.6; }
  25% { opacity: 1; }
  75% { opacity: 0.4; }
  100% { opacity: 0.4; }
}