:root {
  --clr-white: #fff;
  --clr-black: #000;
  --clr-header: #484444;
  --clr-bg: #fbe9db;
  --clr-pop-up: #fcd3b4;
  --footer-bg: #484444;
  --clr-text: var(--clr-black);
  --clr-link: #ff00ff;
  --clr-article: #ffeada;
  --clr-orange: #f38f2d;
  --clr-logo: #f47c10;
  --clr-blue-dark: #f1f4f4;
  --clr-gray: #808080;

  --spacing: 18vw;
  --mobile-spacing: 5vw;
  --font-size-base: 1.125em;
  --font-family-base: "Nunito", sans-serif;
  --font-family-highlight: "Moderustic", sans-serif;
  --line-heigth-base: 1.5;
  --line-height-highlight: 1.2;

  --hamburger-size: 4rem;
  --hamburger-transition-time: 200ms;
  --hamburger-bg: var(--clr-gray);
  --hamburger-color: var(--clr-white);

  --clr-button-text: var(--clr-black);
  --clr-button-bg: var(--clr-logo);
}