* {
  box-sizing: border-box;
}

/* Fonts */

@font-face {
  font-family: "Golos";
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GolosText-VariableFont_wght.ttf") format("truetype");
}

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

/* Density */

:root {
  --ids__density: 1.3;
}

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


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

  --mobile-font-size-min: 20;
  --mobile-font-size-max: 40;

  --desktop-font-size-min: 15;
  --desktop-font-size-max: 40;

  --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;
  }
}