/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  /*основные размеры страницы*/
  --container-width: min(100%, 700px);
  --container-block-padding: clamp(122px, 30%, 130px);

  /*шрифты*/
  --font-main: "Inter", Arial, sans-serif;
  --font-accent: "PressStart2P", fantasy;
  --font-header-title: clamp(
    49px,
    calc(49px + 16 * ((100vw - 375px) / 325)),
    65px
  );
  --font-header-subtitle: clamp(
    14px,
    calc(14px + 9 * ((100vw - 375px) / 325)),
    23px
  );
  --font-weight-text: 410;
  --font-weight-title: 715;
  --font-weight-accent: 400;

  /*фон страницы*/
  --page-bg:
    repeating-linear-gradient(to right, #d3d3d3 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to bottom, #d3d3d3 0 2px, transparent 2px 4px),
    linear-gradient(to bottom, #e7e7e7 0%, #e7e7e7 0.01%, #1a1a1a 100%);

  /*цвета*/
  --label-stroke-color: #ffffff;
  --accent-color: #000000;
  --heart-contour-color: #000;
  --animation-fill-color: red;
}


@media (width < 375px) {
  :root {
    --font-header-title: clamp(42px, 10vw, 49px);
  }
}