/*
  Переменные для вашего проекта
  и их переопределение под различные устройства
*/
:root {
  --background-color: #000028;
  --background-image: url(../images/cover-image-dark.png);
  --text-color: #F1B2CE;
  --background-text-color : #FF0070;
  --color-subject-text: #FF0070;
  --color-title-text: #000028;
  --focus-color: #DB00FF;
  --focus-shadow-color: #FF0070;
  --shadow-color: #FF0070;
  --border-color: #FF0070;
  --color-rec: #FF0070;
  --header-height: 768px;
  --focus-size: 157px;
  --header-text-width: 491px;
  --flex-gap: 80px;
  --grid-gap: 20px;
  --rec-right: 29px;
  --rec-top: 21px;
  --main-gap: 60px;
  --dist: 20px;
}

@media (width < 1024px) {
  :root {
    --header-height: 1024px;
    --focus-size: 120px;
    --header-text-width: 364px;
    --flex-gap: 80px;
    --grid-gap: 20px;
    --dist: 20px;
  }
}

@media (width < 768px) {
  :root {
    --header-height: 668px;
    --focus-size: 116px;
    --header-text-width: 355px;
    --flex-gap: 50px;
    --grid-gap: 20px;
    --dist: 10px;
    --rec-right: 19px;
    --rec-top: 11px;
    --main-gap: 40px;
  }
}