x-sign {
  --interval: 1s;
  display: block;
  text-shadow: 0 0 10px var(--color1), 0 0 20px var(--color2),
    0 0 30px var(--color3), 0 0 40px var(--color4);
  /*will-change: filter, color;*/
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
  -webkit-animation: flicker steps(100) var(--interval) 1s infinite;
}

x-sign.type1 {
  /*--color1: #ffd564;
  --color2: #f261a0;
  --color3: #a60f50;
  --color4: #a82a60;*/
  color: #ffffff;
  --color1: #ff9085;
  --color2: #f3bf6b;
  --color3: #f8b444;
  --color4: #f89b44;
}
x-sign.type2 {
  color: #ffffff;
  --color1: #ca628f;
  --color2: #da81a8;
  --color3: #de79a5;
  --color4: #ce1e6b;
}
x-sign.type3 {
  color: #ffffff;
  --color1: #5efcfc;
  --color2: #00fff7;
  --color3: #0081ff;
  --color4: #0033ff;
}

@keyframes flicker {
  50% {
    color: #fff;
    filter: saturate(200%) hue-rotate(20deg);
  }
}
@-webkit-keyframes flicker {
  50% {
    color: #fff;
    filter: saturate(200%) hue-rotate(20deg);
  }
}