/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */

:root {
  --font-main:
    "Inter-Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-accent: "Press-Start-2P", fantasy;
  --main-font-weight: 410;
  --title-font-weight: 715;
  --bg-gradient:
    repeating-linear-gradient(
      90deg,
      #d3d3d3 0px,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      #d3d3d3 0px,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(180deg, #e7e7e7 0%, #1a1a1a 100%);
  --main-color: #000000;
  --bg-color: #ffffff;
  --text-difference-color: #ffffff;
  --border: 2px solid var(--main-color);
  --container-width: clamp(375px, 80%, 700px);
  --header-title-font-size: clamp(3.0625rem, calc(3.5 * 2vw), 4.0625rem);
  --header-text-font-size: clamp(0.875rem, 2vw, 1.4375rem);
  --header-padding-y: clamp(7.505rem, 10vw, 8.125rem);
  --header-padding-x: clamp(1rem, 8vw, 7.625rem);
  --main-padding-top: 100px;
  --main-padding-bottom: 50px;
  --card-tag-text-stroke: white;
  --backdrop-color: rgba(0, 0, 0, 0.75);
  --button-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);

  /* heart */
  --contour-color: #000000;
  --animation-fill-color: #ff0000;
}
@media (width >= 1024px) {
  :root {
    --main-padding-top: 95px;
  }
}

/* clamp(7.505rem, 2vw, 8.125rem); */