body {
  background-image: none;
  background-color: white;
  font-size: 1.1em;
  color: black;
}
      
@media (orientation: landscape){
  .container {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
      "nav"
      "main";
    gap: 2px;
    margin: auto 20% auto 20%;
    background-color: black;
  }
  
  .mobile {
    display: none; 
  }
}
      
@media (orientation: portrait){
  .container {
    display: none; 
  }
        
  .mobile {
    display: grid;
    grid-template-columns: auto;
    gap: 2px;
    margin: auto;
    place-items: center;
  }
}
      
.container > div.nav {
  grid-area: nav;
  color: white;
}
      
.container > div.main {
  grid-area: main;
  place-items: center;
  display: flex;
  place-items: center;
}
      
.navBar {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  li {
    float: left;
    display: block;
    padding: 8px 10px 8px 8px;
    border: 3px solid black;
    margin: .1% 0 .1% 2px;
  }
  li:hover {
    background-color: white;
    color: black;
  }
        
  a:link {
    color: white; 
  }
  a:visited {
    color: white; 
  }
  a:hover {
    color: white; 
  }
}
      
.mainContent {
  background-color: white;
  padding: 1%;
  width: 100%;
  margin: auto;
  border: 5px solid black;
  border-top: 0;
}

.centerImg {
  text-align: center;
  img {
    border: 5px double black;
    width: 95%;
  }
}

.caption {
  text-align: center;
  font-style: italic;
  font-family: serif;
}

p {
  margin: 0 0 0.8em 0; 
}