:root {
  --paper: #fdf7f5;  /* blush cream */
  --ink: #4b3a4f;    /* soft plum */
  --rose: #c9738f;   /* links, hover, accents */
  --petal: #f7e6ec;  /* code and table backgrounds */
  --font: 15px/1.7 "DM Mono", ui-monospace, Menlo, monospace;
}

/* The page */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: var(--font); }
::selection { background: var(--petal); }
/* Whatever is on the page sits in the middle; once it's taller than the screen it starts at the top and scrolls */
main { flex: 1 0 auto; padding: 24px 16px;
       display: flex; align-items: center; justify-content: center; }
.content { width: 100%; max-width: 68ch; }

a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover, a:focus-visible { color: var(--rose); outline: none; }

/* Post list */
.index { list-style: none; margin: 0 auto; padding: 0; width: fit-content; }
.index li { display: flex; gap: 2ch; margin-bottom: .5em; }
.index span { color: var(--rose); }

/* A post's title, date and back link */
.cover { text-align: center; margin-bottom: 2em; }
.cover p { color: var(--rose); }
.cover b { color: var(--ink); font-weight: 500; }

/* Post text */
.prose a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.prose h2, .prose h3 { font-size: 1em; font-weight: 500; color: var(--rose); margin: 2.5em 0 .5em; }
.prose img { display: block; margin: 1.5em auto; max-width: 100%; border-radius: 8px; }
.prose blockquote { margin: 1.5em 0; padding-left: 2ch; border-left: 2px solid var(--rose); font-style: italic; }
.prose li::marker { color: var(--rose); }
pre, code { font-family: inherit; }
:not(pre) > code { background: var(--petal); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
pre { padding: 14px 18px; background: var(--petal); border-radius: 8px; overflow-x: auto; }
table { border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--petal); padding: 4px 12px; text-align: left; }
th { color: var(--rose); font-weight: 500; }