/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --main-font: Inter-Variable;
  --accent-font: PressStart2P;

  --main-text-font-weight: 410;
  --accent-font-weight: 400;
  --cards-titles-font-weight: 715;

  --repeating-gradient-left-to-right: repeating-linear-gradient(to right, #d3d3d3 0 2px, transparent 2px 4px);
  --repeating-gradient-top-to-bottom: repeating-linear-gradient(to bottom, #d3d3d3 0 2px, transparent 2px 4px);
  --linear-gradient: linear-gradient(to bottom, #e7e7e7, #1a1a1a);

  --cards-titles-font-size: 1.125rem;
  --main-font-size: 1.125rem;
  --buttons-font-size: 0.875rem;

  --buttons-line-height: 0.9;
  --main-text-line-height: 1.3125;
  --titles-line-height: 1.2215;

  /* ТАКИМИ ТАНЦАМИ С БУБНАМИ Я ЕЩЕ НЕ ЗАНИМАЛСЯ
     LINE HEIGHT В FIGMA И CSS СОВЕРШЕННО ПО-РАЗНОМУ
     РАБОТАЮТ, ТАКОЕ ВПЕЧЕТЛЕНИЕ. ЕСЛИ ОСТАВИТЬ У 
     ЗАГОЛОВКОВ КАРТОЧЕК СТАНДАРТНЫЙ ОТСТУП, ТО ВСЕ 
     РАБОТАТ НОРМАЛЬНО НА 1Й КАРТОЧКЕ, НО ВСЕ ЛОМАЕТСЯ 
     ОСТАЛЬНЫХ И ПОЛУЧАЕТСЯ КАКОЙ-ТО НАКОПИТЕЛЬНЫЙ ЭФФЕКТ
     НА ПОСЛЕДНЕЙ. НО ЕСЛИ СДЕЛАТЬ ЕГО 1.2215, ТО ЭТО ЗНАЧЕНИЕ
     РАСЧИТЫВАЕТСЯ БОЛЕЕ АДЕКВАТНО НА СТРАНИЦЕ И ВЫХОДИТ
     МИНИМАЛЬНОЕ РАСХОЖДЕНИЕ С МАКЕТОМ */

  --main-text-paragraph-spacing: 1.6875rem;
  --cards-title-paragraph-spacing: 1.1875rem;

  --header-title-font-size: clamp(3.0625rem, 2.6966rem + 1.561vw, 4.0625rem);
  --header-subtitle-font-size: clamp(0.875rem, 0.6692rem + 0.878vw, 1.4375rem);

  --main-bg-color: #fff;
  --borders-color: #000;

  --header-inline-padding: clamp(1rem, -1.4352rem + 10.3902vw, 7.65625rem);
  --header-block-padding: clamp(7.5rem, 7.3171rem + 0.7805vw, 8rem);

  --button-inline-size: 8.125rem;
  --button-block-size: 2.25rem;

  --card-content-gap: 1.5625rem;
  --main-content-gap: 3.25rem;

  --label-stroke-color: #fff;
  /* --label-stroke-color: #00812b; */
  /* ТУТ СРАЗУ СДЕЛАЛ АЛЬТЕРНАТИВНЫЙ ЦВЕТ ПРОСТО 
     ДЛЯ ПРОВЕРКИ ПРАВИЛЬНОЙ РАБОТЫ */

  --save-button-padding-inline: 1.125rem;
  --save-button-padding-block: 0.9375rem;

  --dialog-window-padding-inline: 1.75rem;
  --dialog-window-padding-block: 1.75rem;
  --dialog-window-gap: 1.875rem;
  --dialog-button-lh: 1.5;

  --contour-color: #000;
  --core-color: transparent;
  --main-body-color: transparent;
  --animation-fill-color: #ff0000;
  --accent-animation-color: #000;
}

@media (width <= 375px) {
  :root {
  --dialog-window-padding-inline: 2.375rem;
  }
}