:root {
  --header_font: 'Whyte', Arial, sans-serif;
  --body_font: 'Whyte', Arial, sans-serif;

  --rgb_darker: 8, 16, 40;
  --rgb_dark: 27, 42, 89;
  --rgb_bright: 188, 203, 235;
  --rgb_brighter: 231, 238, 255;

  --rgb_white: 255, 255, 255;

  --margin: 200px;

  --dark: rgb(var(--rgb_dark));
  --darker: rgb(var(--rgb_darker));
  --bright: rgb(var(--rgb_bright));
  --brighter: rgb(var(--rgb_brighter));
  --white: rgb(var(--rgb_white));

  --gradient: linear-gradient(180deg, #24366F 0%, #1B2A59 98.38%);

}

@media screen and (max-width: 1279px) {
  :root {
    --margin: 50px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --margin: 20px;
  }
}

.bright {
  color: var(--bright);
}

.brighter {
  color: var(--brighter);
}

.dark {
  color: var(--dark);
}

.darker {
  color: var(--darker);
}

.white {
  color: var(--white);
}