header nav {
    background-color: #008000;
    background-image: url("../images/pancake-menu.svg");
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 40px;
}
  
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
header nav.expanded {
  background-image: url("../images/x-menu.svg");
}
header nav.expanded ul {
  display: block;
}

header nav a:link,
header nav a:visited {
  text-decoration: none;
  padding: 0.5em;
  color: white;
  font-weight: bold;
  font-size: 1.2;
  display: block;
}
header nav a:hover,
header nav a:active {
  text-decoration: underline;
  background-color: #00a000;
}
* {
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  /* rules here for the "horizontal" navigation
       for wider screens */
  header nav,
  header nav.expanded {
    background-image: none; /* remove background image */
    padding: 0.25rem;
  }
  /* set up flex for navigation
     ul is flex parent and
     li are flex items */
  header nav ul,
  header nav.expanded ul {
    display: flex;
  }
  header nav ul li {
    flex-basis: 20%;
    text-align: center;
  }
}