body {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  line-height: 1.25;
  background-color: hsl(230, 25%, 90%);
  max-width: 760px;
  margin: auto;
}

header,
footer {
  background-color: hsl(210, 50%, 30%);
  color: white;
  text-align: center;
  padding: 0.25rem;
}
h1,
h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}

header h2 {
  font-weight: 200;
  margin-top: -0.5em;
}

main h2 {
  color: hsl(210, 50%, 30%);
}

a {
  color: hsl(40, 80%, 30%);
}

footer a {
  color: hsl(40, 80%, 70%);
}

footer p {
  line-height: 0.75;
}

nav {
  background: hsl(40, 80%, 70%);
  width: 100%;
}

nav ul {
  /* display: flex; */
  padding-left: 0;
  margin: auto;
}

nav ul li {
  /* flex: 1 1 100%; */
  list-style-type: none;
  text-align: center;
}

nav ul li a {
  display: block;
  padding: 0.5rem;
  color: black;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: white;
  font-weight: bold;
  box-shadow: 0 4px hsl(40, 80%, 30%);
}

main {
  background-color: white;
  text-align: center;
  padding: 0.5rem;
}

section#colors p span {
  padding: 3px 5px;
  border-radius: 3px;
  box-shadow: inset -1px -1px 0 1px rgba(0, 0, 0, 0.25);
}

section#colors .page span {
  background-color: hsl(230, 25%, 90%);
  color: black;
}

section#colors .header span {
  background-color: hsl(210, 50%, 30%);
  color: white;
  font-family: "Oswald", sans-serif;
}

section#colors .content span {
  background: white;
  color: black;
}

section#colors .contentheader span {
  background: white;
  color: hsl(210, 50%, 30%);
  font-family: "Oswald", sans-serif;
}

section#colors .accentlight span {
  background: hsl(40, 80%, 70%);
  color: black;
}

section#colors .accentdark span {
  background-color: hsl(40, 80%, 30%);
  color: white;
}