#sitetitle,
footer {
  text-align: center;
  background-color: #437889;
  border: 5px solid #98becb;
  color: #98becb;
}
header img,
.headings {
  display: inline-block;
  vertical-align: middle;
}
header img {
  width: 100px;
}

nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #cff0b1;
}

nav li {
  list-style-type: none;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav button {
  display: block;
  background-color: transparent;
  border: none;
  text-decoration: none;
  font-size: 1.25rem;
}

nav li a {
  display: block;
  color: #437616;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
  font-size: 1.25rem;
}
nav li a:hover {
  background-color: #8dc45c;
  color: #cff0b1;
}

nav li a.active {
  background-color: #437616;
  color: #cff0b1;
}

a{
  text-decoration: none;
}

h2,
h3 {
  color: #615097;
}

h2 {
  text-align: center;
}

.firstarticle{
  margin: 10px;
}

p {
  color: #808e92;
  padding-left: 1em;
  padding-right: 1em;
}

footer {
  font-size: 10px;
  margin-top: 5px;
  border: 5px solid #98becb;
}

body {
  margin: 0.5em;
}

.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.card {
  flex: 0 0 340px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.card img {
  max-width: 100%;
}
.card .text {
  padding: 0 20px 20px;
}

.card button{
  display: block;
  border: 2px solid #615097;
  text-decoration: none;
  margin: auto;
  padding: 10px;
  color: #615097;
}

.card .text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
}

a {
  text-decoration: none;
}

@media screen and (max-width: 750px){
    .hide {
        display: none;
    }
    .forecast{
      display: none;
    }
    #townEvents{
      grid-column: 1;
      grid-row: 2;
    } 
    .firstarticle{
      grid-column: 1;
      grid-row: 1;
    }
    .firstarticle img{
      width: 100%;
    }
}

.cities{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
}

.forcast{
  grid-column: 1 / 2;
  grid-row: 2;
}

.firstarticle{
  grid-column: 1;
  grid-row: 1; 
  border: 2px solid #437616;
}

.firstarticle h3{
  text-align: center;
}
.forecast article {
    margin: 10px;
}

.forecast h1, h2 {
    text-align: center;
}

.forecast section {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.forecast .block {
    display: block;
} 

#townEvents{
  text-align: center; 
  border: 2px solid #437616;
  margin: 10px;
  padding-bottom: 20px;
}

.timeline {
  border-left: 4px solid #615097;
  margin: auto; 
  position: relative;
  padding: 10px;   
  list-style: none;
  text-align: left;    
  max-width: 80%;
}

 .timeline .event{
  padding-bottom: (50px * 0.5);
  margin-bottom: 30px;  
  position: relative;
}

.timeline .event:last-of-type { 
  padding-bottom: 0;
  margin-bottom: 0;       
}

.recreation{
  /* margin-top: 10px; */
  border: 2px solid #437889;
  padding: 10px;
}