html, body {
  margin: 0;
}
#header nav { display: flex; justify-content: space-between;}
#header { flex-basis: 100%; flex-shrink: 0; }
#header h1 span { margin-left: 1em; font-size: 50%; font-style: italic; }
nav a, #header a { text-decoration: none ; color: inherit; padding-left: 0.5em}

body { display: flex; flex-wrap: wrap; font-family: sans; height: 100%; }

article { flex-basis: 60%; padding-left:10px; padding-bottom: 23px;}
article li { flex-basis: 60%; padding-left: 0em; }
.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 200px for the navigation bar, 1fr for the blog articles */
}

.#sidebar* {
  grid-column: 1 / 2; /* position the navigation bar in the first column */
}

.article {
  grid-column: 2 / 3; /* position the blog articles in the second column */
}
body > #sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
#sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#sidebar li ul { padding-left: 0.6em }
#article-sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#article-sidebar li ul { padding-left: 0.6em }
#A2020-sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#A2020-sidebar li ul { padding-left: 0.6em }
body > #A2020-sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
#A2021-sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#A2021-sidebar li ul { padding-left: 0.6em }
body > #A2021-sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
#A2022-sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#A2022-sidebar li ul { padding-left: 0.6em }
body > #A2022-sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
#A2023-sidebar ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
#A2023-sidebar li ul { padding-left: 0.6em }
body > #A2023-sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
body > #article-sidebar { flex-basis: content; padding-right: 1vw; min-width: 16em; }
footer { display: flex; justify-content: space-between; bottom: 0;
flex-basis: 100%; flex-shrink: 0; 
width: 100%;
}

footer { color: black;} 
footer a { color: inherit; }
footer div { padding: 1em; }


pre code {
  display: block;
  background: none;
  white-space: pre;
  max-width: 100%;
  min-width: 100px;
  padding: 0;
}


/* cut here to leave vanity behind */


/* footer */