@font-face {
  font-family: "CoFoSans";
  src: url("/front/fonts/font-general-regular.woff2") format("woff2"), url("/front/fonts/font-general-regular.woff") format("woff");
}

:root {
  line-height: 0.09765625vw;
  /* 1/1024 of a width. So 1rlh = 1px for 1024px width */
  /* rlh is the shared adaptive grid unit */
  font-family: "CoFoSans", sans-serif;

  /* To break words when there isn't enough space */
  overflow-wrap: break-word;

  --header-font-size: 73rlh;
  /* --header-line-height: 65rlh;
  --header-top-compensator: -21.5rlh;
  --header-bottom-compensator: -9rlh; */
  --header-line-height: 60rlh;

  --paragraph-font-size: 21rlh;
  --paragraph-line-height: 25rlh;
  --paragraph-top-compensator: -9.4rlh;
  --paragraph-bottom-compensator: -5.6rlh;

  --small-font-size: 14rlh;
  --small-line-height: 15rlh;
  --small-letter-spacing: -0.02rlh;
}
/* Неподдерживаемые языки */
:root:lang(vi) article :is(.text, .header) {
  font-family: sans-serif;
}

::selection {
  color: var(--background-color);
  background-color: var(--text-color);
}

body {
  font-size: 1rlh;
  line-height: normal;
  background-color: var(--background-color);
}

p,
h1,
h2,
h3,
small,
ol > li,
ul > li {
  text-box: trim-both ex alphabetic;
}

h1,
h2,
h3 {
  color: var(--text-color);
  font-size: var(--header-font-size);
  line-height: var(--header-line-height);
}

p, li, form.text {
  color: var(--text-color);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
}

p, li {
  margin-top: 0;
  margin-bottom: 0;
}

a {
  color: var(--text-color);
  /* Отдельно важно для Сафари */
  text-decoration-line: underline;
  text-decoration-color: var(--text-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4rlh;
}

/* Стрелка ссылки без подчёркивания */
a .linkArrow {
  text-decoration-line: underline;
  text-decoration-color: var(--background-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4rlh;
}

/* Ссылка в меню и крошках без подчёркивания */
menu a {
  text-decoration: none;
}

/* Ссылки на полях без подчёркивания только на десктопе */
@media screen and (width > 800px) {
  .note>:nth-child(2) a {
    text-decoration: none;
  }
}

a:hover,
a:hover p,
a:hover h1,
a:hover h2,
a:hover svg {
  text-decoration-color: var(--hover-color);
  color: var(--hover-color);
}

small, p.small {
  color: var(--text-color);
  font-size: var(--small-font-size);
  line-height: var(--small-line-height);
  letter-spacing: var(--small-letter-spacing);
}

small {
  display: block;
}

svg {
  color: var(--text-color);
}

/* Текстовые пункты меню */
li.text {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
}

/* Отжатие воздуха слева */
h1,
h2,
h3,
p,
small, p.small,
form.text {
  margin-left: -0.07em;
}

/* Компенсацией владеет форма */
form.text > p {
  margin-left: 0;
}


/* ************ */
/* WIDE DESKTOP */
/* ************ */

@media screen and (min-width: 1720px) {
  :root {
    line-height: 1.5625px;
    /* Фиксируем единицу сетки */
  }

}

/* ****** */
/* MOBILE */
/* ****** */

@media screen and (max-width: 800px) {
  :root {
    --header-font-size: 41.5rlh;
    --header-line-height: 40rlh;
    line-height: .9px;
  }
}

/*
@media screen and (max-width: 800px) {
  :root {
    line-height: 0.14vw;
  }
}

@media screen and (max-width: 700px) {
  :root {
    line-height: 0.16vw;
  }
}

@media screen and (max-width: 600px) {
  :root {
    line-height: 0.18vw;
  }
}

@media screen and (max-width: 500px) {
  :root {
    line-height: 0.2vw;
  }
}

@media screen and (max-width: 450px) {
  :root {
    line-height: 0.22vw;
  }
}

@media screen and (max-width: 400px) {
  :root {
    line-height: 0.23vw;
  }
}

@media screen and (max-width: 360px) {
  :root {
    line-height: 0.25vw;
  }
}
*/