body {
  background-color: grey;
  color: purple;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

header {
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

header,
main,
footer {
  max-width: 960px;
  margin: 0 auto;
}

header,
footer {
  background-color: orange;
  padding: 1rem;
  border: 1px solid red;
}

header img {
  width: 80px;
  height: auto;
}

main article {
  margin: 0.5rem;
  border: 1px solid #bbb;
  padding: 0 1rem;
  background-color: white;
}
main picture {
  display: none;
  margin: 0.5rem;
}

.headings {
  display: flex;
  flex-direction: column;
}

.headings h1 {
  font-size: 1.6rem;
  margin: 0 0 0 17px;
  font-family: "Times New Roman", Times, serif;
  color: blue;
}

h2 {
  color: darkblue;
  font-family: Arial, Helvetica, sans-serif;
}

.m {
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 1pt;
  color: darkblue;
  margin-left: 20px;
  font-size: 1rem;
}

footer {
  height: auto;
  color: black;
}

header,
main,
footer {
  max-width: 960px;
  margin: 0 auto;
}

main picture {
  display: none;
  margin: 0.5rem;
}

/* Small/Phone View ***************/
nav {
  margin: 0 auto;
  max-width: 960px;
  background-color: red;
}
.navigation {
  list-style: none;
  padding: 0;
}
.navigation li:first-child {
  display: block;
}
.navigation li {
  display: none;
}
.navigation a {
  display: block;
  padding: 0.75rem;
  text-align: left;
  text-decoration: none;
  color: black;
  font-weight: 700;
}
.navigation a:hover {
  color: white;
  background-color: black;
}

/* the onclick JS toggles the .reponsive class from display none (.navigation li) to display block because the responsive class is added to the end of the class list like this in HTML.
  <ul class="navigation responsive">
*/
.responsive li {
  display: block;
}