:root {
  /* Colors */
  --main: hsl(48, 7%, 86%);
  --secondary: hsl(48, 17%, 94%);
  --bg: hsl(48, 17%, 94%);
  --font: hsl(220, 9%, 19%);
  --font-hover: hsl(209, 23, 45);
  --header: hsl(48, 17%, 94%);
  --footer: hsl(48, 17%, 94%);

  /* text */
  --line-height: 1.618;
  --global-font-size: 1.7rem;

  /* Sizes */
  --width: 90%;
  --max-width: 1080px;
  --small: 820px;

  /* Fonts */
  --headline-font: 'Source Serif Pro', serif;
  --text-font: 'Source Sans Pro', sans-serif;

  /* Headings */
  --hxl: 2rem;
  --h1: 2rem;
  --h2: 2.1rem;
  --h3: 1.9rem;
  --h4: 1.3rem;

  /* Spacers */
  --space: 7rem 0;
  --space-center: 7rem auto;
  --small-space: 5rem 0;
  --small-space-center: 5rem auto;
  --headline-margin: 0.27em 0;

  /* Hamburger */
  --hamburger-color: var(--font);
  --hamburger-color-active: var(--bg);
  --hamburger-stroke-width: 3;

  /* Mobile Nav */
  --mobile-nav-bg: var(--font);
  --mobile-nav-font-color: va(--main);
  --mobile-nav-active-color: #58748e;
  --mobile-font-size: 3.2rem;

  /* Buttons */
  --btn-padding: 0.9rem 1.8rem;
  --btn-radius: 3rem;
  --btn-color: transparent;
  --btn-font-color: var(--font);
  --btn-border: var(--font);
  --btn-hover-color: var(--font-hover);
  --btn-hover-font-color: var(--secondary);
  --btn-hover-border: var(--font-hover);

  /* Forms */
  --form-font: 1.4rem;
  --form-color: #faf9f6;
  --form-font-color: #aeaeae;
  --form-border: #eaeaea;
  --form-padding: 1rem 2rem;

  /* Video */
  --video-height: 80vh;
  --video-min-height: 50rem;

  /* Shadows */
  --box-shadows: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);

  /* Gradient */
  --gradient: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);

  /* Scrollbar */
  --scrollbar-width: 7px;
  --scrollbar-track-color: #ffffff;
  --scrollbar-thumb-color: #58748e;
  --scrollbar-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 3px 6px rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-border: none;
  --scrollbar-thumb-border-radius: 30px;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scrollbar-width: var(--scrollbar-width);
}

/* Width in PX > 920px */
/* ==== = BIG = ==== */
@media only screen and (min-width: 62em) {
  :root {
    /* Headings */
    --hxl: 2.9rem;
    --h1: 2.9rem;
    --h2: 2.1rem;
    --h3: 1.9rem;
    --h4: 1.3rem;

    /* Spacers */
    --space: 8rem 0;
    --space-center: 8rem auto;
    --small-space: 5rem 0;
    --small-space-center: 5rem auto;

    /* Buttons */
    --btn-hover-color: #58748e;

    /* Video */
    --video-height: 60vh;
    --video-min-height: 40rem;
  }
}