<h1>Batman</h1>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background: radial-gradient(#8481c0, #4a468b);
}

@font-palette-values --color {
  font-family: "Honk";
  base-palette: 4;
  override-colors: 0 #000, 1 #000, 2 #f5d40e, 3 #f5d40e, 4 #f5d40e, 5 #f5d40e,
    6 #f5d40e, 7 #f5d40e;
}

h1 {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 25, "SHLN" 100;
  font-palette: --color;
  font-size: calc(14vw + 0.5rem);
  letter-spacing: 0.4ch;
}