@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");
* {
  box-sizing: border-box;
  position: relative;
  cursor: crosshair;
}

html {
  cursor: crosshair;
  height: 100%;
  background: #000;
  color: #fff;
}

body {
  display: flex;
  place-items: center;
}

body {
  min-height: 100%;
  display: grid;
  place-items: center;
}

.text-grid {
  cursor: crosshair;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  --chars: 11;
  text-transform: uppercase;
  font-size: calc(70vmin / var(--chars));
  display: grid;
  grid-template-columns: repeat(var(--chars), 1.2em);
}

html {
  background: #0a1e0f;
}

.char {
  --d: max(0.25, var(--distance, 0));
  opacity: var(--d);
  display: inline-grid;
  place-items: center;
  transform: scale(calc(var(--d) * 1.4));
  color: rgb(calc(255 * var(--d)), calc(255 * (1 - var(--d))), calc(20 + (40 * var(--d))));
  transition: color 0.2s linear;
}