:root {
  --bg: #fff;
  --fg: #222;
  --muted: #666;
  --link: #005cc5;
  --border: #ddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #c9d1d9;
    --muted: #8b949e;
    --link: #58a6ff;
    --border: #30363d;
  }
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  margin: 40px auto;
  padding: 0 12px;
  max-width: 42rem;

  background: var(--bg);
  color: var(--fg);

  font:
    1rem/1.7 system-ui,
    /* -apple-system, */
    /* BlinkMacSystemFont, */
    "Segoe UI",
    sans-serif;

  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.25; }

h1 { margin-top: 0; }

a {
  color: var(--link);
  text-decoration: none;
  font-family: monospace;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; }

pre, code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--border);
}

blockquote {
  margin-left: 0;
  padding-left: 1rem;
  color: var(--muted);
  border-left: 3px solid var(--border);
}

hr { border: 1px solid var(--border); }

.pub-title, .talk-title, .news-when, .contact-type { font-weight: bold; }

.pub-where, .talk-where { font-style: italic; }

.pub-link, .talk-link, .contact-info { font-family: monospace; }

#bio p { text-align: justify; }

img.profile {
  float: right;
  margin: 10px 0 10px 20px;
  max-width: 30%;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}

#back-to-top:hover {
  background: var(--muted);
  border-color: var(--muted);
}

#back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}