@keyframes lights {
  0% {
    color: hsl(120, 40%, 80%);
    text-shadow:
      0 0 1em hsla(120, 100%, 60%, 0.2),
      0 0 0.125em hsla(120, 100%, 70%, 0.3),
      -1em -0.125em 0.5em hsla(120, 100%, 50%, 0),
      1em 0.125em 0.5em hsla(120, 100%, 50%, 0);
  }
  30% { 
    color: hsl(120, 80%, 90%);
    text-shadow:
      0 0 1em hsla(120, 100%, 70%, 0.5),
      0 0 0.125em hsla(120, 100%, 80%, 0.5),
      -0.5em -0.125em 0.25em hsla(120, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(120, 100%, 60%, 0.4);
  }
  40% { 
    color: hsl(120, 100%, 95%);
    text-shadow:
      0 0 1em hsla(120, 100%, 80%, 0.5),
      0 0 0.125em hsla(120, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(120, 100%, 70%, 0.2),
      0.25em 0.125em 0.125em hsla(120, 100%, 70%, 0.4);
  }
  70% {
    color: hsl(120, 80%, 90%);
    text-shadow:
      0 0 1em hsla(120, 100%, 70%, 0.5),
      0 0 0.125em hsla(120, 100%, 80%, 0.5),
      0.5em -0.125em 0.25em hsla(120, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(120, 100%, 60%, 0.4);
  }
  100% {
    color: hsl(120, 40%, 80%);
    text-shadow:
      0 0 1em hsla(120, 100%, 60%, 0.2),
      0 0 0.125em hsla(120, 100%, 70%, 0.3),
      1em -0.125em 0.5em hsla(120, 100%, 50%, 0),
      -1em 0.125em 0.5em hsla(120, 100%, 50%, 0);
  }
}


@font-face {
    font-family: 'Dollar';
    src: url('fonts/Dollar Outline.otf') format('opentype'),
         url('fonts/Dollar Outline.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* ensures text shows while font loads */
}

.animated-logo {
    font-family: 'Dollar';
    font-weight:;
    font-size: 4rem;
    animation: lights 5s 750ms linear infinite;
}