/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --font-main: 'Inter-Variable', system-ui, sans-serif;
  --font-accent: 'PressStart2P', monospace;
  --main-font-size: 1.125rem;
  --accent-font-size: 0.875rem;
  --floppy-size: 21px;
  --modal-padding-inline: 30px;
  --card-inline-size: clamp(min(100%, 375px), 50vw, 700px);
  --main-color: #000;
  --bg-color: #fff;
  --heart-hover: #000;
  --button-text-color: #fff;
  --label-stroke-color: #000;
  --card-font-weight: 400;
  --card-title-font-weight: 700;
  --contour-color: #000;
  --animation-fill-color: #ff0000;
  --bg-image: repeating-linear-gradient(
      to right, 
      #d3d3d3 0,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ), 
    repeating-linear-gradient(
      to bottom, 
      #d3d3d3 0,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(
      to bottom,
      #e7e7e7 0.01%,
      #1a1a1a
    );
}

@media (max-width: 376px) {
  :root {
    --floppy-size: 28px;
    --modal-padding-inline: 40px;
  }
}