html,
body {
  min-height: 100vh;
  margin: 0;
}

html {
  background: #090000;
  font-size: calc(1em + 3vmax);
  line-height: 1.1;
  text-align: center;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

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

x-sign:nth-of-type(1) {
  color: lightpink;
  --color1: pink;
  --color2: orangered;
  --color3: red;
  --color4: magenta;
  font-family: Bad Script;
}

x-sign:nth-of-type(2) {
  color: yellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: darkgreen;
  font-family: Monoton;
}

x-sign:nth-of-type(3) {
  color: lightyellow;
  --color1: yellow;
  --color2: orange;
  --color3: brown;
  --color4: purple;
  font-family: Bad Script;
}

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