<main id="main">
  AMA over; Qs answered sporadically into the future!
</main>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

main {
  font-family: 'Permanent Marker', cursive;
  color: #333f;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 12px;
}

const effect = () => {
  window.requestAnimationFrame(effect);
  const now = performance.now();

  const dir = (now / 650) % (Math.PI * 2);
  const x = Math.sin(dir) * 2;
  const y = Math.cos(dir) * 2;

  const hue = (now / 20) % 360;

  const shadows = (new Array(4).fill(null)).map((_, i) => {
    return `${x * i * 4}px ${y * i * 4}px 0 hsla(${hue + i * 20}, 50%, 50%, ${1 / (i+1)})`;
  });
  main.style.textShadow = shadows.join(',');
};
effect();