/* Colors: light-dark(light value, dark value). Dark follows the visitor's system setting. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fdfdfc, #161616);
  --text: light-dark(#1f1f1f, #e6e6e6);
  --muted: light-dark(#6b6b6b, #9a9a9a);
  --link: light-dark(#1a5fb4, #78aeed);
  --rule: light-dark(#e4e4e0, #2e2e2e);
}

body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 system-ui, sans-serif;
}

a { color: var(--link); }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.25rem; }
time { color: var(--muted); font-size: 0.9rem; }
img { max-width: 100%; height: auto; }
iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 1.5rem 0; }
iframe.short { aspect-ratio: 9 / 16; max-width: 20rem; margin-inline: auto; }

header { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 3rem; }
header nav a { margin-left: 1rem; }
.site-name { font-weight: 700; color: inherit; text-decoration: none; }

footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
pre { overflow-x: auto; padding: 1rem; background: var(--rule); border-radius: 4px; }

/* Post list on the home page */
.posts { list-style: none; padding: 0; }
.posts li { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
.posts time { flex: 0 0 6.5rem; }

/* Gradient text: add class="rainbow" to an inline element */
.rainbow {
  background: linear-gradient(90deg, #e63946, #f4a261, #e9c46a, #2a9d8f, #457b9d, #9b5de5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}