header h1 {
    text-align: center;
}
nav.gallery {
    text-align: center;
    border-top: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    font-size: larger;
}
nav.navigator {
    position: sticky;
    top: 5em;
    margin-top: -5rem;
}
nav.navigator aside {
    position: relative;
}
nav.navigator aside.prev {
    left: -10em;
    float: left;
    text-align: left;
}
nav.navigator aside.next {
    left: 10em;
    float: right;
    text-align: right;
}
nav.navigator aside a {
    display: block;
}
main {
    margin-top: 5em;
    text-align: center;
    border-top: #ccc solid 1px;
}
footer {
    text-align: center;
}
footer img.logo {
  width: 2em;
  margin-top: 0;
  margin-bottom: -0.6em;
  margin-right: 0.33em;
}
footer ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
footer ul li {
    position: relative;
    display: inline-block;
    padding: 1rem;
    margin-left: -1rem;
}

article.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  margin: 1em;
}

/* On mouse-over, add a deeper shadow */
article.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
article.card .container {
  padding: 2px 16px;
}

article.card img {
    width: 100%;
}

section.card-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

@media (max-width: 900px) {
nav.navigator {
    position: relative;
    top: 0em;
    margin-top: 0rem;
}
nav.navigator aside {
    position: relative;
}
nav.navigator aside.prev {
    left: 0em;
    float: left;
    text-align: left;
}
nav.navigator aside.next {
    left: 0em;
    float: right;
    text-align: right;
}
nav.navigator aside a {
    display: block;
}
main {
    border-top: none;
}
section.card-container {
    display: grid;
    grid-template-columns: auto auto;
}
}