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

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

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

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

a {
  text-decoration: none;
  color: RoyalBlue;
}

a:hover {
  text-decoration: underline;
}

.main-image {
  float: right;
  max-width: 15vw;
  border: solid DarkGray 1px;
}

header {
  height: 3vh;
  background-color: WhiteSmoke;
  grid-column: auto / span 12;
}

.aside-list {
  border-bottom: solid DarkGray 1px;
}
  
aside {
  grid-column: auto / span 2;
  display: flex;
  flex-direction: column;
  background-color: WhiteSmoke;
  border-right: solid DarkTurquoise 1px;
  padding: 0px 20px 0px 20px;
}

main {
  grid-column: auto / span 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  padding: 0px 2vw 0px 2vw;
}

nav {
  grid-column: auto / span 3;
  background-color: WhiteSmoke;
  border: solid DarkGray 1px;
  padding: 10px;
}

.main-content {
  grid-column: auto / span 12;
}

#small-logo {display: none;}
  
@media only screen and (max-width: 500px) {
  nav, aside, main {grid-column: auto / span 12;}
  aside {border: solid white 0px;}
  img {max-width: 90vw;}
  #big-logo {display: none;}
  #small-logo {display: block;}
  aside {display: none;}
}