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;
}

aside {
  display: none;
}

article {
  margin: 0.5rem;
  border: 1px solid #bbb;
  padding: 0 1rem;
  background-color: #eee;
  height: auto;
}

.article img {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
  border: 1px solid #bbb;
}

.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,
footer {
  max-width: 960px;
  margin: 0 auto;
}

/* 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;
}

.weatherdetails {
  margin: 10px auto;
  position: relative;
}

.weatherdetails img {
  width: 100%;
}

h2,
h3,
p {
  margin: 0;
}

.weathersummary {
  position: absolute;
  top: 25px;
  right: 50px;
  background: radial-gradient(#eee, #4567aa);
  border: 1px solid #000;
  padding: 1.5rem;
  box-shadow: 0 0 30px #333;
  opacity: 0.9;
  display: grid;
}

table,
th,
td {
  border: 1px solid #333;
  border-collapse: collapse;
  padding: 5px;
}

td {
  background-color: lightblue;
  font-size: 0.8rem;
  text-align: center;
}

.town {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  font-size: 0.8rem;
}

.town section {
  margin: 0.5rem;
  border: 1px solid #bbb;
  padding: 0 1rem;
  background-color: #eee;
  color: purple;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.town section img {
  width: 100%;
  height: auto;
  border: 1px solid #bbb;
}

.town {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}