/**
 * This file controls most of our 'responsive' logic,
 * where sizes are defined on particular reference points.
 * We define two reference points: mobile and desktop.
 */

:root {
  --viewport-desktop: var(--viewport-max, 1600);
  --factor-desktop: 1vw;
  --viewport-mobile: var(--viewport-bp, 800);
  --factor-mobile: 2vw;

  --viewport: var(--viewport-mobile);
  --factor: var(--factor-mobile);

  --viewport-ratio: calc(1000 / var(--viewport) * var(--factor));
}

@media (min-width: 768px) {
  :root {
    --viewport: var(--viewport-desktop);
    --factor: var(--factor-desktop);
  }
}

html {
  /**
	* By default, cap 1 rem to a minimum of 9px, which is the smallest value allowed by Safari.
	* This applies to screens smaller than min screen.
	*/
  font-size: 56.25%;
}

@media (min-width: 200px) {
  html {
    /**
		* This is the magic part.
		* We want the font-size to be our controlled ratio.
		* This creates truly responsive rem, where 1rem = 10px at exactly 400px and at 1600px and above
		* You can also use this visualisation to understand the relation between viewport size and rem:
		* https://www.desmos.com/calculator/dhkjr16m9c
		*/
    font-size: var(--viewport-ratio);
  }
}

@media (min-width: 4000px) {
  html {
    font-size: 62.5%;
  }
}