/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --background-image: repeating-linear-gradient(to right, #d3d3d3, transparent 2px, #d3d3d3 4px), 
             repeating-linear-gradient(to bottom, #d3d3d3, transparent 2px, #d3d3d3 4px),
             linear-gradient(#e7e7e7, #1a1a1a);
  --main-text-font: "Inter", monospace, sans-serif;
  --accent-text-font: "Press Start 2P", monospace, sans-serif;
  --main-text-weight: 400;
  --main-text-weight-header: 700;
  /* --width-content: clamp(375px, 80vw, 700px);
  --width-dialog-text: clamp(198px, 50vw, 234px); */
  --main-text-font-size: 18px;
  --accent-text-font-size: 0.875rem;
  --accent-text-header: clamp(3.0625rem, 2.4847rem + 2.4653vw, 4.0625rem);
  --accent-text-subheader: clamp(0.875rem, 0.55rem + 1.3867vw, 1.4375rem);
  --main-width: clamp(23.4375rem, 11.8451rem + 49.4607vw, 43.75rem);
  --header-width: clamp(23.4375rem, 11.7007rem + 50.077vw, 43.75rem);
  --header-block-padding: clamp(7.5rem, 7.2111rem + 1.2327vw, 8rem);
  --header-subheader-gap: 1.25rem;
  --card-between-gap: 3.125rem;
  --card-header-inline-paddng: 0.625rem;
  --card-header-block-padding: 0.25rem;
  --card-content-padding: 1.5625rem;
  --card-content-gap: 1.5625rem;
  --card-content-text-gap: 1.6875rem;
  --card-content-button-gap: 0.625rem;
  --border-width: 0.125rem;
  --button-heght: 2.375rem;
  --text-shadow-width: 0.0625rem;
  --watermark-block-start-padding: 1.4375rem;
  --watermark-inline-end-padding: clamp(0.6875rem, 0.2541rem + 1.849vw, 1.4375rem);
  --save-button-inline-size: clamp(19.375rem, 18.3277rem + 4.4684vw, 21.1875rem);
  
  --main-text-color: #000;
  --background-page-color: #fff;
  --border-color: #000;
  --text-shadow-color: #fff;
  --background: linear-gradient(180deg, #E7E7E7 0%, #1A1A1A 100%);
  --heart-icon-contour-color: #000;
  --heart-icon-main-body: red;
  --heart-icon-core: #fff;
  --bg-color-dialog:rgb(0 0 0 / 0.75);

  --watermark-opacity: 0.5;

  --dialog-inline-size: 22.0625rem;
  --dialog-block-padding: 1.875rem;
  --dialog-inline-padding: 1.875rem;
  --dialog-row-gap: 1.875rem;
  --dialog-column-gap: 1.25rem;
}

@media (width <= 375px) {
    :root {
        --dialog-inline-size: 21.3125rem;
        --dialog-inline-padding: 2.5rem;
    }
  }