* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lucida Sans", sans-serif;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'hd hd hd hd hd hd'
    'nv pb pb pb pb nf'
    'ft ft ft ft ft ft';
}

@media only screen and (max-aspect-ratio: 2/3) {
  .grid-container {
    grid-template-areas:
      'hd hd hd hd'
      'nv nv nv nv'
      'pb pb pb nf'
      'ft ft ft ft';
  }
}

.grid-container > div {
  margin: 5px;
}

.header {
  grid-area: hd;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
}

.headerElement {
  display: inline-block;
}

.header > h1 {
}

.nav {
  grid-area: nv;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
}

.nav ul {
  list-style-type: none;
  margin: 1px;
  padding: 1px;
}

.nav li {
  padding: 1px;
}

.nav a, .nav p {
  display: block;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  cursor: pointer;
}

.navDrop a {
  display: block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nav details {
  display: block;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  cursor: pointer;
}
 
.nav a.active, .nav p.active   {
  background-color: black;
  color: red;
}

.nav a:not(.active), .nav p:not(.active), .nav details:not(.active) {
  background-color: grey;
  color: white;
}

.nav a:hover, .nav p:hover, .nav details:hover{
  background-color: black;
}

.pageBody {
  grid-area: pb;
}

.newsFeed {
  grid-area: nf;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
}

.newsFeed > h2 {
  font-size: 20px;
  padding-bottom: 10px;
}

.newsFeed li {
  padding: 5px;
  margin-bottom: 5px;
}

.footer {
  grid-area: ft;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  text-align: center;
}

/* Article */
.article {
  margin: 10px 0px;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  padding-left: 5px;
}

.article h2 {
  text-align: center;
}

.article p {
  text-indent: 2ex;
}

.article blockquote {
  color: grey;
  margin: 1em 10px;
  border-left: 0.5em solid #ccc;
  padding: 0.5em 10px;
}