/* Fonts */

@font-face {
  font-family: Pragmatica;
  src: url("../fonts/Pragmatica.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 0% 300%;
  font-style: oblique 0deg 20deg;
  font-display: swap;
}

@font-face {
  font-family: "Elma-Trio-Slanted-Web";
  src: url("../fonts/Elma-Trio-Slanted-Web.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 0% 300%;
  font-display: swap;
}

@font-face {
  font-family: "Elma-Trio-Bold-Italic";
  src: url("../fonts/Elma-Trio-Bold-Italic-Web.ttf") format("truetype");
  font-weight: 200 600;
  font-stretch: 0% 300%;
  font-display: swap;
}

@font-face {
  font-family: "Arrow";
  font-weight: 500;
  font-style: normal;
  font-display: block;
  src: url("../fonts/arrow.woff2") format("woff2"),
    url("../fonts/arrow.woff") format("woff");
}

body {
  font-family: "Pragmatica", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

/* Density */

:root {
  --ids__density: 1.3;
}

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


html {
  /* Font-size calculation using variables.
     Числа рампы — со старого сайта Shift: mobile 17→26, desktop 13→23. */

  --mobile-font-size-min: 17;
  --mobile-font-size-max: 26;

  --desktop-font-size-min: 13;
  --desktop-font-size-max: 23;

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