Variable Validator

    :root {
      --color-background: red;
    }

    h1 {
      background-color: var(--color-background);
    }
  

    <h1>Stegosaurus</h1>
  

    :root {
      --color-background: red;
    }

    h1 {
      background-color: var(--color-backgroud);
    }
  

    <h1>Triceratops</h1>
  

    :root {
      --color-highlight: yellow;
    }

    h1 {
      background-color: --color-highlight;
    }
  

    <h1>Ankylosaurus</h1>
  

    :root {
      --color-highlight: yellow;
    }

    h1 {
      background-color: var(--color-highlight);
    }

    .title {
      background-color: orange;
    }
  

    <h1 class="title">Brontosaurus</h1>
  

    :root {
      --color-highlight: yellow;
    }

    h1 {
      background-color: orange;
    }

    .title {
      background-color: var(--color-highlight);
    }
  

    <h1 class="title">Micropachycephalosaurus</h1>
  

    :root {
      --color-fancy-pants: yellow;
    }

    h1 {
      --color-fancy-pants: magenta;
      background-color: var(--color-fancy-pants);
    }
  

    <h1>Brachiosaurus</h1>
  

    :root {
      --color-fancy-pants: yellow;
    }

    h1 {
      --color-fancy-pants: magenta;
    }

    .title {
      background-color: var(--color-fancy-pants);
    }
  

    <h1 class="title">Parasaurolophus</h1>
  

    :root {
      --color-highlight: yellow;
      --color-fancy-pants: magenta;
    }

    h1 {
      background-color: var(--color-highlight);
    }

    .title {
      background-color: var(--color-fancy-pants);
    }
  

    <h1 class="title">Spinosaurus</h1>
  

    :root {
      --color-highlight: yellow;
      --color-fancy-pants: magenta;
    }

    h1 {
      --color-highlight: orange;
      background-color: var(--color-highlight);
    }

    .title {
      background-color: var(--color-fancy-pants);
    }
  

    <h1 class="title">Troodon</h1>
  

    :root {
      --color-highlight: yellow;
      --color-neutral: grey;
      --color-fancy-pants: magenta;
    }

    h1 {
      background-color: var(--color-highlight);
    }

    .title-fancy {
      background-color: var(--color-fancy-pants);
    }

    .title {
      background-color: var(--color-neutral);
    }
  

    <h1 class="title title-fancy">Carnotaurus</h1>