:root {
  color-scheme: light dark;
}

html {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji;
  font-size: 1.3rem;
  font-weight: 350;
  font-size: clamp(18px, 100vw / var(--width), 20px);
  line-height: 1.5;
}

html,
body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  a {
    text-decoration: none;
  }
}

main {
  > header > .container,
   > footer > .container,
   > .content {
    max-width: 720px;
    margin: 0 auto;

    @media only screen and (max-width: 768px) {
      margin: 0 10px;
    }
  }

  > footer {
    margin-top: 5em;
    text-align: center;
    opacity: 0.8;
  }
}

.post-index {
  > article {
    margin-top: 2.5em;
  }
}

.post-details {
  display: flex;
  align-content: center;
  column-gap: .5em;
  opacity: 0.6;
  font-size: 90%;

  > p {
    margin: 0;

    &:not(:first-child)::before {
      content: "•";
      padding-right: .5em;
    }
  }
}

/* Code */
code,
pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
}
code {
  white-space: nowrap;
  padding: 0.25em 0.5em;
  font-size: 85%;
  color: var(--color-text-code);
  background-color: var(--color-background-off1);
  border: 1px solid var(--color-background-off2);
  border-radius: var(--rounding);
}
pre {
  display: block;
  overflow: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  background-color: var(--color-background-off1);
  border: 1px solid var(--color-background-off2);
  border-radius: var(--rounding);

  &:has(> code.hljs) {
    padding: 0;
    background-color: transparent;
  }

  code {
    white-space: pre;
    padding: 0;
    font-size: 100%;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}