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

:root {
  font-size: 0.09765625vw;
  /* 1/1024 of a width. So 1rem = 1px for 1024px width */
  /* Change to 1px for regular behavior */
  font-family: "CoFoSans", sans-serif;

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

  --header-font-size: 73rem;
  --header-line-height: 65rem;
  --header-top-compensator: -21.5rem;
  --header-bottom-compensator: -9rem;

  --paragraph-font-size: 21rem;
  --paragraph-line-height: 25rem;
  --paragraph-top-compensator: -8.5rem;
  --paragraph-bottom-compensator: -6.5rem;

  --small-font-size: 14rem;
  --small-line-height: 15rem;
  --small-top-compensator: -7rem;
  --small-bottom-compensator: -3rem;
  --small-letter-spacing: -0.02rem;
}

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

body {
  background-color: var(--background-color);
}

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

p {
  color: var(--text-color);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
  margin-top: var(--paragraph-top-compensator);
  margin-bottom: var(--paragraph-bottom-compensator);
}

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

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

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

/* Ссылка на полях без подчёркивания только на десктопе */
@media screen and (min-width: 800px) {
  .note>div: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, .small p {
  color: var(--text-color);
  font-size: var(--small-font-size);
  line-height: var(--small-line-height);
  margin-top: var(--small-top-compensator);
  margin-bottom: var(--small-bottom-compensator);
  letter-spacing: var(--small-letter-spacing);
  display: block;
}

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

/* Обёртки текстовых блоков */
div.header,
div.text,
div.caption {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
}

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


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

@media screen and (min-width: 1600px) {
  :root {
    font-size: 0.09765625rem;
    /* Фиксируем размер текста */
  }

}

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

@media screen and (max-width: 800px) {
  :root {
    --header-font-size: 41.5rem;
    --header-line-height: 40rem;
    --header-top-compensator: -13.5rem;
    --header-bottom-compensator: -7rem;
    font-size: .9px;
  }
}

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

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

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

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

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

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

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