<div class="body">
  <div class="wavefont-div">
  čćŜĘķŌŎļĺļġđĦŊōōĤķňŅĦĽĜėċĥĭİŐĬĝęʼnʼnĿħIJŁŠŀğĭōĦŚĦĠŢČčćŜĘķŌŎļĺļġđĦŊōōĤķňŅĦĽĜėċĥĭİŐĬĝęʼnʼnĿħIJŁŠŀğĭōĦŚĦĠŢČčćŜĘķŌŎļĺļġ
  </div>
</div>

@property --bg1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --bg2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --hga {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --hgb {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g3 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@font-face {
  font-family: "Wavefont";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/l/font?kit=L0xjDF00m0cP6hefyOCpRdycFsGxSrqDyx4fE4tvQYb4bdT9BMpjKNNBaEg89a5MNuLeF1NOtSWF0DO3TeLnas9-UFAV50jD2MVCwuLxW9QGD-RdzQg4xEMmac-c01PLIiWA_utv7FG1lphvBzyKrk89iF8hOHu7BOJlKCbYDWByr1XoHkD2hr8Li65ZySOVwJ-cbMABOnalrQ7Bl8VCYtB0ldGbZzqVPP3KwTr6XOyeraWl0nxmzPJ9bj1Mqj5r6amJuhWSl_UCHsPRfaQPQxsFkuD_FShKP7gQwHNe_6vjYiTWhniwb4AmPdJoPUgKf57EEfSDBa_DbJhfs6hA-Uop13_HQizh08PnIVufXstx3mdRwN2YNTxv0mlgulcxePwhPGp1ENYSOdHCj_FuvB0xmye7ebYXUHoyE_p3akl41OuwMyxvCWnHSlC9MRkVLHdUaz5B9XonbFQE7OZJ&skey=8f673a4f0b34837&v=v10)
    format("woff2");
}

body {
  user-select: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: linear-gradient(180deg, var(--bg1) 60%, var(--bg2));
  animation: 20s infinite normal move-body linear;
}

.wavefont-div {
  position: relative;
  font-family: "Wavefont", Tofu;
  font-optical-sizing: auto;
  font-weight: 1000;
  font-style: normal;
  font-variation-settings: "ROND" -100, "YELA" -40;
  font-size: 572px;
  padding: 0;
  margin: 0;
  left: 0;
  letter-spacing: -10px;
  background: linear-gradient(180deg, transparent 20%, #000 60%, var(--hga)),
    repeating-linear-gradient(transparent 0 6px, var(--g1) 4px 20px),
    repeating-linear-gradient(90deg, var(--g2) 0 4px, var(--g3) 4px 20px);
  /*   text-shadow: var(--hgb) 0px -230px 182px; */
  filter: drop-shadow(0px -139px 71px var(--hgb));
  background-clip: text;
  color: transparent;
  animation: 60s infinite normal move linear, 20s infinite normal time linear;
  /*     animation: 20s infinite normal time linear; */
}

@keyframes move {
  0% {
    margin-left: 0%;
  }

  100% {
    margin-left: -145rem;
  }
}

@keyframes time {
  0% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  25% {
    --hga: navy;
    --hgb: #fc0;
    --g1: black;
    --g2: white;
    --g3: black;
  }

  50% {
    --hga: transparent;
    --hgb: transparent;
    --g1: black;
    --g2: white;
    --g3: black;
  }

  75% {
    --hga: #000000;
    --hgb: #0000;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  100% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }
}

@keyframes move-body {
  0% {
    --bg1: #b5b5ac;
    --bg2: #a3fff3c4;
  }

  25% {
    --bg1: #250500;
    --bg2: #1e1ea3;
  }

  50% {
    --bg1: #000000;
    --bg2: #003a83;
  }

  75% {
    --bg1: #000000;
    --bg2: #000000;
  }

  100% {
    --bg1: #b5b5ac;
    --bg2: #a3fff3c4;
  }
}