/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --main-font: "Inter", sans-serif;
  --accent-font: "PressStart2P", fantasy;
  --main-font-weight: 410;
  --title-font-weight: 715;
  --bg-color: #fff;
  --accent-color: #000;
  --border: 2px solid #000;
  --background-image:
    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.01%, #1a1a1a 100%);
  --block-width: clamp(23.4375rem, 30.5164vw + 16.2852rem, 43.75rem);
  --header-padding-inline: clamp(1rem, 9.9531vw - 1.3328rem, 7.625rem);
  --header-padding-block: clamp(7.625rem, 0.7512vw + 7.4489rem, 8.125rem);
  --header-title-size: clamp(3.0625rem, 2.7107rem + 1.5023vw, 4.0625rem);
  --header-text-size: clamp(0.875rem, 0.6766rem + 0.8451vw, 1.4375rem);
  --header-logo-gap: 20px;
  --card-title-padding: 4px 10px;
  --card-body-padding: 25px;
  --card-body-gap: 25px;
  --card-buttons-gap: 7px;
  --like-button-width: 130px;
  --like-button-height: 38px;
  --like-button-padding: 9px 17px;
  --save-button-width: clamp(19.125rem, 18.4868rem + 2.723vw, 20.9375rem);
  --save-button-padding: 15px 18px;
  --dialog-width: clamp(21.3125rem, 21.0484rem + 1.1268vw, 22.0625rem);
  --dialog-padding: 30px;
  --dialog-mobile-padding-inline: 40px;
  --contour-color: #000;
  --animation-fill-color: #f00;
  --button-text-color: #fff;
  --button-animation-bg: #000;
  --focus-shadow: 2px 2px 0 #000;
  --label-stroke-color: #fff;
}

@media (width <= 375px) {
  :root {
    --block-width: 100%;
    --header-title-size: 49px;
    --header-text-size: 14px;
  }
}