:root {
  --pico-font-family-sans-serif: "DM Sans", sans-serif;
  --pico-font-family-monospace: "DM Mono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-family: "DM Serif Display", serif;
  --pico-font-weight: 500;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.site-footer {
  text-align: center;
}

blockquote p:last-child {
  margin-bottom: 0;
}

.footer-links {
  padding-inline-start: 0px;
}

.footer-link {
  display: inline-block;
  margin-inline-end: 8px;
}

.footer-links li:last-child {
  margin-inline-end: 0px;
}

.container {
  max-width: 700px;
}

main {
  flex: 1;
}

ul > li {
  list-style: disc;
}

.post-list > li {
  list-style: none;
}

.post-list > li > .post-title {
  margin-block-start: 4rem;
}

.post-date {
  color: var(--pico-muted-color);
  margin-right: 8px;
}

[data-theme="light"],
:root:not([data-theme="dark"]),
:host:note([date-theme="dark"]) {
  --pico-primary: var(--pico-color-slate-600);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    --pico-primary: var(--pico-color-blue-600);
  }
}

[data-theme="dark"] {
  --pico-primary: var(--pico-color-blue-600);
}

img {
  max-height: 40rem;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.post-list-item {
  display: grid;
  grid-template-columns: 3fr 5fr;
  padding-bottom: 8px;
}

.post-list {
  list-style-type: none;
  padding-inline-start: 0px;
}

.post-footer-items {
  padding-inline-start: 0px;
}

.post-footer-item {
  margin-inline-end: 8px;
  display: inline-block;
}

.post-footer-items li:last-child {
  margin-inline-end: 0px;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  box-shadow: none;
}

code[class*="language-"] {
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--pico-font-family-monospace);
}