html, body {
  font: 16px Arial, sans-serif;
}

header, footer, nav, article, aside {
  border-radius: 5px;
  margin: .25rem;
}

header, footer {
  background-color: #4a8a8a;  
  color: white;
  padding: .85rem;
}

nav,
aside {
  background-color: #f0f5f5;
  border: .1rem dashed #4a8a8a;
}

/* Default - small screens (<=800px): nav links horizontal across top */
nav {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 30px;
  padding: .85rem;
  align-items: center;
}

/* Above 800px - large screens: sidebar nav on left, article on right */
@media (min-width: 800px) {
  #div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  nav {
    min-width: 60px;
    max-width: 60px;
    height: auto;
    min-height: 870px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 1rem;
  }
}

h1, h2, h3 {
  margin: .25rem;
  padding: .25rem;
}

h1 {
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.3em;
}

address {
  font-size: .8rem;
  font-weight: bold;
}

article, aside {
  padding: .25rem;
}

aside {
  margin-right: .5rem;
  margin-left: .5rem;
  overflow: auto;
}