index.css

*,
:after,
:before {
  background-color: inherit;
  box-sizing: border-box;
  color: inherit;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  color: #16171a;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

nav ul {
  border-right: 1px solid #edf2f7;
}

a {
  color: #000;
  text-decoration-skip-ink: auto;
  text-decoration: underline;
}

audio,
video {
  display: block;
  height: auto;
  width: 100%;
}

blockquote {
  border-left: 5px solid #ececec;
  font-style: italic;
  padding-left: 1rem;
}

main {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  max-width: 60rem;
  padding: 1rem;
}

pre {
  margin: 0.5rem 0;
  padding: 0.5rem;
}

code,
pre {
  background: #ecedee;
}

code {
  padding: 0.1rem;
}

pre code {
  border: none;
}

pre {
  overflow-x: auto;
  padding: 1rem;
}

img {
  max-width: 100%;
}

hr {
  background: #000;
  border: 0;
  height: 1px;
}

header {
  flex-basis: 10rem;
  flex-grow: 1;
  position: relative;
}

header a {
  text-decoration: none;
}

header li {
  margin-bottom: 0.2rem;
  margin-right: 2rem;
  text-align: right;
}

header a.active {
  font-weight: bold;
}

header,
section {
  padding: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  line-height: 1;
  margin: 1rem 0;
}

section h1:first-child {
  margin-top: 0;
}

strong,
b,
dt {
  font-weight: bold;
}

.meta {
  display: block;
  margin: 2rem 0;
}

.post blockquote,
.post details,
.post dl,
.post figure,
.post form,
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6,
.post hr,
.post ol,
.post p,
.post pre,
.post table,
.post ul {
  margin: 0.5rem 0;
}

.post dd,
.post ol,
.post ul {
  margin-left: 2rem;
}

.post h1:first-child,
.post h2:first-child,
.post h3:first-child,
.posts h1:first-child,
.posts h2:first-child,
.posts h3:first-child {
  margin-top: 0;
}

.posts ul,
header ul {
  list-style: none;
}

.posts li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.posts li a,
.posts li div {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posts li time {
  font-variant-numeric: tabular-nums;
  padding-left: 1rem;
  white-space: nowrap;
}

@media screen and (max-width: 45rem) {
  header li {
    display: inline;
    margin-right: 1rem;
  }
  .logo {
    margin-top: 0;
    padding-bottom: 1rem;
  }
  header ul {
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 2rem;
  }
  main {
    margin: 0 auto;
  }
  nav ul {
    border-right: 0;
  }
}

section {
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 999;
  min-width: 70%;
}

caption, figcaption {
  font-size: smaller;
}

[role='status'] {
  background: rgba(255, 255, 0, 0.25);
  padding: 0.5rem 0.75rem;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

table caption {
  caption-side: bottom;
  margin-top: 0.5em;
}

table th,
table td {
  border: 1px solid;
  padding: 0.25rem 0.5rem;
  text-align: left;
  vertical-align: top;
}