/* Fluid typography shared by all pages */

:root {
  /* Declare without units so we can compute the slope */
  --min-vw: 414;
  --max-vw: 1200;
  --min-h1-font-size: 32;
  --max-h1-font-size: 72;

  /* m = (y2 - y1) / (x2 - x1) */
  --rise: calc(var(--max-h1-font-size) - var(--min-h1-font-size));
  --run: calc(var(--max-vw) - var(--min-vw));
  --slope: calc(var(--rise) / var(--run));
}

h1,
h2 {
  /* Due to the way addition and subtraction works in calc(),
  we need to "type cast" --min-vw and --min-h1-font-size to appropriate units */
  --min-vw-px: calc(var(--min-vw) * 1px);
  --min-h1-font-size-px: calc(var(--min-h1-font-size) * 1px);

  /* y - y1 = m(x - x1) */
  --fluid-font-size-px: calc(
    var(--slope) * (100vw - var(--min-vw-px)) + var(--min-h1-font-size-px)
  );

  /* "Type cast" --max-vw to px */
  --max-h1-font-size-px: calc(var(--max-h1-font-size) * 1px);

  font-size: clamp(
    var(--min-h1-font-size-px),
    var(--fluid-font-size-px),
    var(--max-h1-font-size-px)
  );
}