/*------------------------------------*\
    FLUID FONT
    https://websemantics.uk/tools/responsive-font-calculator/

    if you wonder why i use minus and multiply by -1 in fontsize-preferred
    it's because minification works this way, doesn't work with plus
\*------------------------------------*/

:root {
  --fontsize-min-unit: calc(var(--fontsize-min) * 1rem);
  --fontsize-max-unit: calc(var(--fontsize-max) * 1rem);

  --fontsize-fontdiff: calc(var(--fontsize-max) - var(--fontsize-min));
  --fontsize-widthdiff: calc(
    var(--fontsize-maxwidth) - var(--fontsize-minwidth)
  );

  --fontsize-preferred: calc(
    var(--fontsize-min-unit) -
      (
        var(--fontsize-fontdiff) * (100vw - var(--fontsize-minwidth) * 1rem) /
          var(--fontsize-widthdiff) * -1
      )
  );

  --font-size-7: var(--fontsize-min-unit);
}

@supports (font-size: clamp(1rem, 1rem, 1rem)) {
  :root {
    --font-size-7: clamp(
      var(--fontsize-min-unit),
      var(--fontsize-preferred),
      var(--fontsize-max-unit)
    );
  }
}