@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #fee2c5;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 4rem;
  line-height: 20vmin;
  font-family: "Didact Gothic", sans-serif;
  /*-webkit-text-stroke: 1px black;*/
}

.text {
  color: transparent;
  background: conic-gradient(
    #6a5495 12%,
    #8236cb 12%,
    #8236cb 33%,
    #1c7947 33%,
    #1c7947 55%,
    #ff865e 55%,
    #ff865e 70%,
    #ff0075 70%,
    #ff0075 87%,
    #f7d1ba 87%
  );
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: randomize-rev 0.5s ease forwards;

  cursor: pointer;
}

.text:hover {
  animation: randomize 0.5s ease forwards;
}

@keyframes randomize-rev {
  0% {
    background-size: 325%;
    background-position: -10em -4em;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 50%;
    background-position: 0 0;
  }
}

@keyframes randomize {
  0% {
    background-size: 50%;
    background-position: 0 0;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 325%;
    background-position: -10em -4em;
  }
}