@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Geist Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0 0% 6%);
}

h1 {
  font-weight: 140;
  letter-spacing: -0.05ch;
  font-size: clamp(2rem, 6vw + 1rem, 8rem);
  background: linear-gradient(black, hsl(0 0% 50%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px hsl(0 0% 90%);
  margin: 0;
  line-height: 1;
}

svg {
  display: none;
}

@media(prefers-reduced-motion: no-preference) {
  h1 {
    -webkit-animation: scribble infinite 0.2s;
            animation: scribble infinite 0.2s;
  }
}

@-webkit-keyframes scribble {
  0% {
    filter: url("#scribble--0");
  }
  25% {
    filter: url("#scribble--1");
  }
  50% {
    filter: url("#scribble--2");
  }
  75% {
    filter: url("#scribble--3");
  }
  100% {
    filter: url("#scribble--4");
  }
}

@keyframes scribble {
  0% {
    filter: url("#scribble--0");
  }
  25% {
    filter: url("#scribble--1");
  }
  50% {
    filter: url("#scribble--2");
  }
  75% {
    filter: url("#scribble--3");
  }
  100% {
    filter: url("#scribble--4");
  }
}