body {
    font-size: 16px;
    font-family: 'Roboto Condensed', sans-serif;
    color: black;
    background-color: whitesmoke;
  }

  header {
    text-align: left;
    background-color: lightskyblue;
    padding: 1rem;
    color: white;

  }

  header > img {
    width: 15%;
    height: auto;
    display: inline-block;
    padding-top: 5%;
 }

  .headertext {
    display: inline-block;
    padding: 2% 2% 0 20%;
  }

  .headertext h1 {
    left: 0;
    text-shadow: 2px 2px gray;
  }

  #motto {
    font-size: 1rem;
    color: white;
    font-style: italic;
    text-shadow: 2px 2px gray;
  }

  .currentConditions {
    
    padding: .5rem;
    vertical-align: middle;
    color: black;
    background-color: white; 
    border: 1pt solid burlywood;
    font-size: 1rem;
    display: none;
  }

  .currentConditions img {
    width: 60px;
    height: auto;
  }

  .currentConditions p {
    margin: .2em;
  }

  nav button {
    background-color: transparent;
  }
  
  nav ul {
    /*hidden nav menu */
    list-style-type: none;
    display: flex;
    flex-direction: column;
  }

  nav li {
    padding: 0 1rem 0 1rem;
    margin: 1rem;
  }

  nav a {
  color: white;
  font-size: 1rem;
  }

  ul {
    margin: 0;
    padding: 0 0 0 10rem;
    border: 2pt solid darkblue;
    background-color: lightskyblue;
    text-shadow: 2px 2px gray;
  }
  nav ul li {
    width: 2px;
    color: #EEEEEE;
    background-color: transparent;
  }
  
  nav ul li a {
    display: block;
    padding: 6px;
    text-decoration: none;
    border-top: 1px;
    color: #EEEEEE;
  }
  
  nav ul li.active a {
    color: black;
    background-color: #EEEEEE;
  }
  
  nav ul li.active:hover a {
    color: black;
    background-color: rebeccapurple;
  }
  
  nav ul li:hover a {
    background-color: #EEEEEE;
    color: black;
  }
  
  nav ul li:hover {
    background-color: #EEEEEE;
  }
  
  nav ul.hide {
    display: none;
    margin: 0;
    padding: 0;
  }
  main {
    background-color: whitesmoke;
    display: block;
    align-items: center;
    margin: 0;
  }

  .banner {
    display: block;
  }

  .banner > h2 {
    padding: 4% 2% 3% 2%;
    text-align: center;
    font-size: 1.5rem;
    text-shadow: 1px 1px gray;
  }

  figure.bannerFigure {
    margin: 0;
    width: 96%;
  }

  figure.bannerFigure > img {
    width: 100%;
  }

  .weatherdetails {
    position: absolute;
    left: 2%;
    bottom: 15%;
    right: 15%;
    background-color: rgba(135, 206, 250, 0.473);
    color: black;
    width: 30%;
    padding: 2%;
    border: 2pt solid darkblue;
  }

  .weatherdetails > h4 {
    margin: 2%; 
    color: rgb(241, 236, 214); 
    text-shadow: 2px 2px gray;
  }

  .label {
    display: inline;
    color: darkblue;
    text-shadow: 1px 1px gray;
 }

  .value {
    color: blue;
    display: inline;
  }

  .forecast {
    display: none;  
    margin: 2%;  
    padding: 5% 10%;
    background-color: lightblue;
  }

  .forecast > h3 {
    text-align: center;
    padding: 2%;
    margin: 0;
  }

  table {
    padding-left: 5%;    
  }
  th {
    background-color: whitesmoke;
    border: 1pt solid darkblue;
    margin: 0;
  }

  td {
    padding: 2%;
    border: 1pt solid darkblue;
  }

  article.prestonStory {
    margin: 2%;
    margin-top: 15%;
    border: 2pt solid darkblue;
    padding: 2rem;
  }

  article > h2 {
    text-align: left;
  }
  .story {
    text-align: justify;
    display: block;
    width: 100%;
    padding-left: 1%;
    padding-right: 10%;
  }

  .prestonStory > img {
    display: block;  
    width: 100%;
    box-shadow: 5px 5px 6px grey;
  }

  
  footer {
    margin-top: 10%;
    display: block;
    background-color: lightskyblue;
    color: black;
  }

  .contact {
    text-align: left;
    display: block;
    width: 100%;
    padding: 5%;
  }
  
  .contact > h3 {
      margin: 0;
  }

  footer > img {
    padding-top: 5%;
    padding-bottom: 5%;
    width: 100%;
    height: auto;
  }

  p.footer-bar {
    background-color: darkblue;
    color: whitesmoke;
    text-align: center;
    margin-top: 5%;
    padding-bottom: 2%;
    padding-top: 2%;
  }

  @media only screen and (max-width: 450px) {
  .weatherdetails {
    font-size: 77%;
    bottom: 12%;
  }
  }