/* =Colors
  ----------------------------------------------- */
  :root {

    /* LEARN */
    --blueberry              : hsl(183, 100%,  37%);
    --blueberry-bright       : hsl(182,  58%,  75%);
    --blueberry-very-bright  : hsl(183,  59%,  92%);

    /* PLAY */
    --strawberry             : hsl(334,  86%,  57%);
    --strawberry-bright      : hsl(334,  86%,  83%);
    --strawberry-very-bright : hsl(328,  59%,  94%);

    /* LIVE */
    --lime                   : hsl( 88,  51%,  53%);
    --lime-bright            : hsl( 86,  52%,  81%);
    --lime-very-bright       : hsl( 85,  50%,  91%);

    /* CONNECT */
    --tangerine              : hsl( 33,  94%,  59%);
    --tangerine-bright       : hsl( 33,  95%,  84%);
    --tangerine-very-bright  : hsl( 33,  95%,  92%);

    /* CREATE */
    --banana                 : hsl( 47,  97%,  60%);
    --banana-bright          : hsl( 47,  98%,  84%);
    --banana-very-bright     : hsl( 48,  95%,  92%);

    /* SHIM: Make banana color darker in some cases, for legibility */
    --banana-dark            : hsl(47, 87%, 50%);


    --midnight : rgb( 41,  41,  41);
    --snow     : rgb(254, 254, 254);
  }



  :root {
    --primary-color:   var(--strawberry);
    --secondary-color: var(--banana);
    --primary-color-readability: var(--strawberry);
  }
  .banana {
    --primary-color:   var(--banana);
    --secondary-color: var(--strawberry);
    --primary-color-readability: var(--banana-dark);
  }
  .blueberry {
    --primary-color:   var(--blueberry);
    --secondary-color: var(--banana);
    --primary-color-readability: var(--blueberry);
  }
  .lime {
    --primary-color:   var(--lime);
    --secondary-color: var(--strawberry);
    --primary-color-readability: var(--lime);
  }
  .strawberry {
    --primary-color:   var(--strawberry);
    --secondary-color: var(--banana);
    --primary-color-readability: var(--strawberry);
  }
  .tangerine {
    --primary-color:   var(--tangerine);
    --secondary-color: var(--strawberry);
    --primary-color-readability: var(--tangerine);
  }


  body {
    background: var(--snow);
    color: var(--midnight);
  }

  h1, h2, h3, h4, h5, h6, strong, em {
    color: gray;
    color: var(--primary-color-readability, gray);
  }

  a {
    color: var(--primary-color-readability);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  }

  a:hover,
  a:active,
  a:focus {
    color: var(--secondary-color);
  }

  main > h1:first-child strong {
    color: var(--secondary-color);
    font-weight: bold;
  }

  header,
  main > h1:first-child {
    background-color: var(--primary-color);
    color: var(--snow);
  }
  header a,
  main > h1:first-child em {
    color: var(--snow);
  }
  header .active a,
  header a:hover,
  header a:active,
  header a:focus  {
    color: var(--secondary-color);
  }
  main > h1:not(:first-child),
  main h2,
  main h3,
  main strong,
  main em {
    color: gray;
    color: var(--primary-color-readability, gray);
  }
  main > ul a,
  main > p a {
    color: var(--primary-color);
  }
  main > ul a:hover,
  main > ul a:active,
  main > ul a:focus,
  main > p a:hover,
  main > p a:active,
  main > p a:focus {
    color: var(--secondary-color);
  }

  /* SHIM: Make the colors work a little differently on the home page */
  /*
  .home.strawberry main {
    --primary-color: var(--blueberry);
    --primary-color-readability: var(--blueberry);
  }
  .home.strawberry main h1 {
    --primary-color: var(--blueberry);
    --primary-color-readability: var(--blueberry);
  }
  */