<h1>Light<span class="flicker">s</span> Out</h1>

h1 {
  color: #FFF;
  text-shadow: 0 0 0.033em #fff, 0 0 0.08em #fff, 0 0 0.1em #7a27ff, 0 0 0.2em #7a27ff, 0 0 0.3em #7a27ff, 0 0 1em #7a27ff, 0 0 1.5em #7a27ff;
  font-size: 5rem;
}

body {
  height:100%;
  min-height: 100vh;
  background-color: #001e2f;
  display:flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.flicker {
  animation: flicker 3s linear forwards alternate infinite;
}

@keyframes flicker {
    0%,
    19.999%,
    22%,
    62.999%,
    64%,
    64.999%,
    72%,
    100% {
        opacity: 1;
    }
    20%,
    21.999%,
    63%,
    63.999%,
    65%,
    71.999% {
        opacity: 0.33;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}