/* ===== Base layout ===== */

html, body {
    margin: 0;
    padding: 0;
}

body{
  font-family: Arial, Verdana, sans-serif;
  margin:0;
  padding:16px;
  box-sizing:border-box;
  display:grid;
  column-gap:24px;

  /* symmetric gutters so the middle column is truly centered */
  grid-template-columns:minmax(220px,1fr) minmax(0,700px) minmax(220px,1fr);

  /* no header row (your h1 is inside main) */
  grid-template-areas:
    "nav content ."
    ".  footer  .";
}

/* Put header/footer in the centered column */
header{ grid-area:header; }
main{ grid-area:content; min-width:0; }
footer{ grid-area:footer; margin-top:24px; min-width:0; }


aside.NavSidebar{
  grid-area:nav;
  justify-self:end;
  width:220px;
  border:0;
  padding:8px 0;
}

nav.Sidebar{
  margin:0 12px;
  text-align:left;
  border:1px solid #000;
  padding:8px 12px;
}


/* ===== Areas in the grid ===== */

main h1#Content{
  margin:0 0 16px 0;
}

aside, nav, article, footer {
    display: block;
}


main {
    grid-area: content;
}

article.Content {
    max-width: 700px;
    text-align: left;
}


/* ===== Typography & spacing ===== */

p {
    margin-top: 0;
    margin-bottom: 16px;
}

.links {
    padding-top: 15px;
}

.back {
    margin-bottom: 48px;
}

dt {
    margin-left: 40px;
    margin-right: 8px;
    margin-bottom: 8px;
}

dd {
    margin-top: 0;
    margin-right: 8px;
    margin-bottom: 24px;
    margin-left: 80px;
}

/* ===== Tables ===== */

table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}

td {
    text-align: left;
    vertical-align: top;
    padding: 5px;
}

/* ===== Responsive behavior for phones / narrow screens ===== */

@media (max-width:768px){
  body{
    grid-template-columns:1fr;
    grid-template-areas:
      "nav"
      "content"
      "footer";
  }
  aside.NavSidebar{ justify-self:stretch; width:auto; padding:0; }
  nav.Sidebar{ border-width:0 0 1px 0; margin:0; padding:0 0 12px 0; }
}