* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
  color: transparent;
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 900;
  display: grid;
  place-items: center;
  text-align: center;
  height: 100dvh;
  align-items: center;
}

div {
  background: linear-gradient(white, rgb(41, 41, 41));
  display: grid;
  gap: 1rem;
  -webkit-background-clip: text;
  background-clip: text;
}

h1 {
  max-width: 20ch;
}

a {
  display: inline-block;
  background: linear-gradient(
    90deg,
    hsla(53, 84%, 74%, 1) 0%,
    hsla(336, 87%, 61%, 1) 50%,
    hsla(262, 81%, 71%, 1) 100%
  );
  color: transparent;
  background-clip: text;
  animation: clickme ease-in-out infinite 3s alternate;
  background-size: 500% auto;
  transition: transform 250ms ease-in-out;
}

a:hover {
  transform: scale(1.1);
}

@keyframes clickme {
  0% {
    background-position: 0% 50%;
    transform: scale(1.05);
  }
  100% {
    background-position: 100% 50%;
    transform: scale(1);
  }
}