h1, h2 {
  font-family: Serif;
  font-weight: normal;
  border-bottom: solid gray 1px;
}

h3 {
  font-family: Sans-Serif;
  font-size: 1em;
}


a:hover {
  text-decoration: underline;
}

body {
    display: grid;
    grid-template-columns: 250px repeat(12, 1fr);
    margin: 0px;
}

nav {
    background: bisque;
    grid-column: auto / span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-right: solid 1px tan;
    & img {width: 100%;}
    & h3 {font-family: Sans-Serif; font-size: 1em;}
    & a {text-decoration: none; color: firebrick;}
    & img {width: 60%; border: solid 20px transparent; border-image: url(images/frame_55px.png) 55 round;}
    & p {margin: 0px}
}

main {
    grid-column: auto / span 9;
    background: floralwhite;
    padding: 0px 0px 0px 20px;
    & a {text-decoration: none; color: royalblue;}  
}

.main-nav {
    background: bisque;
    padding: 15px 25px 15px 15px;
    border: solid 1px tan;
    display: inline-block;
}

aside {
    background: floralwhite;
    grid-column: auto / span 3;
    display: flex;
    flex-direction: column;
    & img {border: solid 1px tan; width: 100%;}
    & figcaption {font: 0.8em sans-serif; color: sienna;}
    & figure {background: bisque; padding: 5px; border: solid tan 1px;}
}

p, li, a {
  font-family: Sans-Serif;
  line-height: 1.6em;
}

@media only screen and (max-width: 900px) {
  main, aside, nav {grid-column: auto / span 13;}
  main {padding-right: 20px;}
  nav img {display: none;}
  nav {border-right: none; border-bottom: solid 1px tan;}
}