@import url('https://fonts.googleapis.com/css2?family=Radley:ital@0;1&display=swap');

:root {
  color-scheme: light;
  --rp-base: #faf4ed;
  --rp-surface: #fffaf3;
  --rp-overlay: #f2e9e1;
  --rp-muted: #9893a5;
  --rp-subtle: #797593;
  --rp-text: #575279;
  --rp-love: #b4637a;
  --rp-gold: #ea9d34;
  --rp-rose: #d7827e;
  --rp-pine: #286983;
  --rp-foam: #56949f;
  --rp-iris: #907aa9;
  color: var(--rp-text);
  background-color: var(--rp-base);
  font-family: 'Radley', serif;
  line-height: 1.65;
}

body {
  max-width: 72ch;
  margin: 2rem auto;
  padding: 0 1.25rem;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--rp-pine);
  line-height: 1.25;
}

a { color: var(--rp-love); }
a:hover { color: var(--rp-iris); }

img, video, svg { max-width: 100%; height: auto; }
figure { margin-inline: 0; }
figcaption, time, .post-author { color: var(--rp-subtle); }

pre, code { background: var(--rp-overlay); }
code { padding: 0.15em 0.3em; border-radius: 0.2em; }
pre { padding: 1rem; overflow-x: auto; border-radius: 0.4rem; }
pre code { padding: 0; }

blockquote {
  margin-inline: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rp-rose);
}

hr { border: 0; border-top: 1px solid var(--rp-overlay); }
::selection { background: var(--rp-overlay); }