/* =Colors
  ----------------------------------------------- */
  :root {
    --midnight:          hsl(0, 0%, 16%);

    --snow:              hsl(0, 0%, 99%);

    --banana:            hsl(56, 97%, 63%);
    --banana-darker:     hsl(56, 92%, 53%);

    --strawberry:        hsl(329, 90%, 48%);
    --strawberry-darker: hsl(329, 80%, 38%);
    --strawberry:        hsl(330, 82%, 60%);
    --strawberry-darker: hsl(330, 82%, 60%);
    --strawberry-brightest: hsl(330,  3%, 97%);
    --strawberry:        hsl(333, 79%, 58%);
    --strawberry-darker: hsl(333, 79%, 48%);
    --strawberry-brightest: hsl(333,  3%, 97%);
    --strawberry:        hsl(335, 79%, 58%);
    --strawberry-darker: hsl(335, 79%, 48%);
    --strawberry-brightest: hsl(335,  3%, 97%);

    --lime:              hsl(86, 53%, 51%);
    --lime:              hsl(86, 43%, 51%);
    --lime-brightest:    hsl(86,  3%, 97%);
    --lime-darker:       hsl(86, 43%, 41%);
    --lime-darkest:      hsl(86,  1%, 30%);

    --sky:               hsl(196, 82%, 72%);
    --sky-darker:        hsl(196, 79%, 36%);
    --sky-darker-alpha: hsla(196, 79%, 36%, 25%);

    --blueberry: hsl(192, 67%, 59%);

    --earth: hsl(28, 66%, 26%);
    --earth: hsl(9, 41%, 32%);
    --sand: hsl(63, 27%, 68%);
    --sand-brightest: hsl(63, 27%, 93%);
    --evergreen: hsl(147, 23%, 30%);

    --primary-color:               var(--lime);
    --primary-color-readability:   var(--lime-darkest);
    --secondary-color:             var(--strawberry);
    --secondary-color-readability: var(--strawberry);

    /* --headline-color:   var(--secondary-color-readability); */
    --headline-color:   var(--evergreen);
    --headline-color:   var(--lime);
    --headline-color:   var(--lime-darker);
    --headline-color:   var(--strawberry);
    --action-color:     var(--primary-color);
    --link-color:       var(--primary-color-readability);
    --text-color:       var(--lime-darkest);
  }

  a {
    color: var(--lime-darker);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
  }
  a:hover,
  a:active,
  a:focus {
    color: var(--strawberry);
  }

main strong {
  font-weight: inherit;
  color: var(--strawberry);
}

  svg {
    fill: currentColor;
  }

  /* a:visited {
    color: var(--text-color);
  } */

  /* main > ul > li {
    list-style-type: square;
  } */

  /* main > ul > li {
    list-style-type: none;
  }
  main > ul > li + li {
    margin-top: 0.75em;
  }
  main > ul > li::before {
    content: "";
    display: inline-block;
    width: 0.375em;
    height: 0.375em;
    background-color: var(--banana);
    vertical-align: middle;
    margin-right: 0.5em;
    margin-left: -1em;
  } */

  body {
    background-color: var(--snow);
    color: var(--text-color);
/*     border-top: 0.25em solid var(--banana); */
    /*! padding-top: 0.25em; */
  }

  main {
    background-color: var(--sand-brightest);
    background-color: hsl(63, 27%, 97%);
      background-color: var(--strawberry-brightest);
  }
  /* footer {
    background-color: var(--sand-brightest);
  } */

  /* footer {
    background-color: var(--lime);
    color: var(--snow);
  }
  footer a {
    color: inherit;
  }
  footer .logos {
    filter: invert(100%);
  } */
  /* footer svg {
    filter: grayscale(100%);
    opacity: 0.5;
  } */

  header {
    /* background-image:
      linear-gradient(to bottom, var(--banana), var(--banana) 0.375em, transparent 0.375em, transparent),
      linear-gradient(to top, var(--lime), var(--lime) 0.375em, transparent 0.375em, transparent); */
    /*! background-color: var(--primary-color); */
    /*! color: var(--snow); */
    color: var(--strawberry);
    background-color: hsl(197, 9%, 54%);
    background-color: var(--evergreen);
    background-color: transparent;
    background-color: hsl(147, 23%, 10%); /* --evergreen */
    background-color: hsl(266, 50%, 26%); /* purple */
    color: var(--snow);
    background-color: hsl(86,  1%, 95%);
    color: inherit;
    background-color: var(--strawberry);
    color: var(--snow);
    background-color: hsl(86, 79%, 69%); /* green */
    color: hsl(186, 89%, 39%);
    background-color: hsl(186, 79%, 69%); /* blue */
    background-color: hsl(20, 99%, 75%); /* orange */
    color: var(--strawberry);
    background-color: hsl(86,  1%, 95%);
    background-color: var(--strawberry-brightest);
    background-color: hsl(348,  3%, 94%);
    background-color: var(--sand-brightest);
    background-color: transparent;
    background-color: hsl(192, 67%, 59%); /* blue */
    background-color: var(--strawberry);
    color: white;
    background-color: var(--strawberry-brightest);
    background-color: hsl(348,  3%, 94%);
    color: inherit;
/*
    background-image:
      linear-gradient(to bottom, var(--banana), var(--banana) 0.2em, transparent 0.2em, transparent),
      linear-gradient(to bottom, transparent, transparent 0.4em, var(--lime) 0.4em, var(--lime) 0.5em, transparent 0.5em, transparent),
      linear-gradient(to bottom, transparent, transparent 0.7em, var(--lime) 0.7em, var(--lime) 0.9em, transparent 0.9em, transparent),
      linear-gradient(to top, transparent, transparent 1.5em, var(--lime) 1.5em, var(--lime) 1.6em, transparent 1.6em, transparent),
      linear-gradient(to top, transparent, transparent 1.2em, var(--banana) 1.2em, var(--banana) 1.4em, transparent 1.4em, transparent),
      linear-gradient(to top, transparent, transparent 0.7em, var(--strawberry) 0.7em, var(--strawberry) 0.9em, transparent 0.9em, transparent),
      linear-gradient(to top, var(--lime), var(--lime) 0.4em, transparent 0.4em, transparent);
*/
  }
  header h2 a {
    color: var(--strawberry);
    color: inherit;
    color: var(--banana);
    color: var(--strawberry);
  }
  header ul a {
    color: var(--strawberry);
  }
  header a:hover,
  header a:active,
  header a:focus {
    color: var(--strawberry);
  }

  @media (false) {

  body {
    background-image: radial-gradient(circle at top left, hsla(196, 82%, 72%, 100%), hsla(196, 82%, 72%, 0%) 100vw, hsla(196, 82%, 72%, 0%));
    background-image: none;
    background-image: linear-gradient(to bottom, hsla(196, 82%, 72%, 50%), hsla(196, 82%, 72%, 0%) 33vh, hsla(196, 82%, 72%, 0%));
    background-color: hsla(196, 82%, 72%, 5%);
  }
  
  header::before {
    content: "";
    display: block;
    width: 33vw;
    height: 33vw;
    position: absolute;
    z-index: -1;
    background-color: var(--banana);
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: translate(-25%, -50%);
  }

}
  
  /* header {
    color: var(--sky-darker);
  }
  header a {
    color: var(--sky-darker);
  } */
  /* header {
    color: var(--lime-darker);
  }
  main h1 {
    color: var(--strawberry);
  } */
@media (min-width: 60em) {
  main h1 + p,
  main h1 + figure + p {
      grid-column: 2/-2;
    }
}

main h1 + p,
main h1 + figure + p {
/*   color: var(--strawberry); */
  font-size: 1.125em;
}

  @media (min-width: 80em) {
    /* main h1 {
      color: var(--snow);
      text-shadow: 0 0 0.2em var(--sky-darker-alpha);
    } */
    main h1 + p {
      /*! grid-column: 1/-1; */
      /*! margin-left: 3em; */
      /*! color: var(--sky-darker); */
/*       font-size: 1.5vw; */
      /* margin-right: 3em; */
      /*! font-style: italic; */
      /*! margin-bottom: 3em; */
    }
    main h1 + p + nav {
      grid-column: 3/5;
    }
    main h1 + p + nav + nav {
      grid-column: 5/7;
      /*! margin-left: 3em; */
    }
  }



  mark {
    background-color: var(--banana);
  }

@media (false) {

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

  a:visited {
  }

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

  header h2 svg > * {
    transition: fill 0.2s;
    fill: currentColor;
  }


}