:root {
  --hue: 200;
}

h1 {
  --x-quadrant: 1;
  --y-quadrant: 1;
  
  color: hsl(var(--hue) 90% 90%);
  text-shadow:
    calc(var(--x-quadrant) * 10px) calc(var(--y-quadrant) * 10px) 0 hsl(var(--hue) 70% 75%),
    calc(var(--x-quadrant) * 20px) calc(var(--y-quadrant) * 20px) 0 hsl(var(--hue) 70% 65%),
    calc(var(--x-quadrant) * 30px) calc(var(--y-quadrant) * 30px) 0 hsl(var(--hue) 70% 55%),
    calc(var(--x-quadrant) * 40px) calc(var(--y-quadrant) * 40px) 0 hsl(var(--hue) 70% 45%),
    calc(var(--x-quadrant) * 50px) calc(var(--y-quadrant) * 50px) 0 hsl(var(--hue) 70% 35%);
  transition: text-shadow .2s ease;
  
  text-transform: uppercase;
  font-size: 25vmax;
  margin: 0;
  line-height: .8em;
  inline-size: -webkit-min-content;
  inline-size: -moz-min-content;
  inline-size: min-content;
}

html {
  block-size: 100%;
  inline-size: 100%;
  background: hsl(var(--hue) 70% 15%);
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  padding: 5vmin;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
}