body {
    font-family: helvetica, sans-serif;
    margin: 1rem 5%;
    line-height: 1.5;
  }
  a:link, a:visited {
      color: blue;
      text-decoration: none;
  }
  a:hover { text-decoration: underline;}
  a:active { color: white; background-color: blue;}
  footer {
    margin-top: 2rem;
    padding: 0.5rem;
    background-color: rgb(240, 240, 240);
    border-top: thin solid black;
  }
  footer p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

ul.parks {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.parks li {
    flex: 0 0 100%;
    box-sizing: border-box;
    margin: 0.5rem;
    padding: 0.5rem;
    border: thin solid black;
}

ul.parks li img {
    max-width: 100%;
}

#parks-map-container {
    width: 100%;
    margin-top: 1rem;
    height: 70vh;
}
.park-mapinfo img {
    max-width: 100%;
}

@media screen and ( min-width: 40rem ) {
    /* 2 columns for park content */
    ul.parks li { flex: 1 0 45%;}
}

@media screen and ( min-width: 55rem ) {
    /* 3 columns for park content */
    ul.parks li { flex: 1 0 28%;}
}

@media screen and ( min-width: 75rem ) {
    /* 4 columns for park content */
    ul.parks li { flex: 1 0 22%;}
}