:root { color-scheme: light dark; }

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

header a {
  font-style: italic;
  text-decoration: none;
  color: inherit;
}

main { margin-top: 2rem; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; margin-top: 2rem; }

.date { color: gray; margin-top: -0.5rem; }

a { color: inherit; }
main a { color: light-dark(#1a56db, #6ea8fe); }
main a:visited { color: light-dark(#6f42c1, #c0a8ff); }

img { max-width: 100%; height: auto; }

pre, code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
pre { overflow-x: auto; padding: 0.75rem; background: rgba(127,127,127,0.12); border-radius: 4px; }

blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid gray; color: gray; }

math { font-size: 1.05em; }

/* Post list on the home page */
main ul { list-style: none; padding: 0; }
main > ul > li { margin: 0.6rem 0; }
main > ul time { color: gray; font-size: 0.85em; display: inline-block; width: 6.5em; }

footer { margin-top: 4rem; color: gray; font-size: 0.85em; }
footer a { color: gray; }