body {
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    grid-template-rows: auto 1fr auto;
  }
}

header {
  grid-column: span 2;
  padding: 30px;
  font-size: 2.0em;
  font-weight: 500;
}

nav {
  grid-column: 3;
  padding: 30px;
  padding-top: 40px;
  font-size: 1.2em;
  color: #aaa;
  text-align: right;
  font-family: monospace;
}

main {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  grid-column: span 3;
  flex: 1;
  padding: 20px;
}

footer {
  grid-column: span 3;
  padding: 30px;
  text-align: center;
  font-family: monospace;
}