* {
  box-sizing: border-box;
}

/* Fonts */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Noto Sans";
  -webkit-font-smoothing: antialiased;
  font-weight: 400;  
}

/* Density */

:root {
  --ids__density: 1.5;
  --ids__radius: .8em;
}

body {
  font-size: 1em;
  line-height: var(--ids__density);
}


html {
  /* Font-size calculation using variables */

  --mobile-font-size-min: 14;
  --mobile-font-size-max: 32;

  --desktop-font-size-min: 10.5;
  --desktop-font-size-max: 21.5;

  --mobile-viewport-min: 320;
  --mobile-desktop-breakpoint: 768;
  --desktop-viewport-max: 1500;

  font-size: calc(var(--mobile-font-size-min) * 1px);

  @media screen and (min-width: 320px) {
    font-size: calc(
      var(--mobile-font-size-min) * 1px +
        (var(--mobile-font-size-max) - var(--mobile-font-size-min)) *
        (
          (100vw - var(--mobile-viewport-min) * 1px) /
            (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))
        )
    );
  }

  @media screen and (min-width: 768px) {
    font-size: calc(
      var(--desktop-font-size-min) * 1px +
        (var(--desktop-font-size-max) - var(--desktop-font-size-min)) *
        (
          (100vw - var(--mobile-desktop-breakpoint) * 1px) /
            (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))
        )
    );
  }

  @media screen and (min-width: 1500px) {
    font-size: calc(var(--desktop-font-size-max) * 1px);
  }

  
}

/* Smooth scroll for anchored links */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}