:root {
  --bg: #fbf1c7; /* gruvbox bg */
  --fg1: #3c3836; /* gruvbox fg1 */
  --text-link: #076678;
}

body {
  max-width: 600px;
  margin: 1rem auto;
  font-family: Garamond, serif;
  font-size: 14px;
  background: var(--bg);
  padding: 0 16px;
}

article {
  padding: 12px;
}

pre {
  padding: 0 0 0 0.5rem;
  border-radius: 2px;
  background-color: #fafafa;
  background: #ebdbb2;
  overflow: auto;
}

ul {
  padding: 0 0 0 24px;
}

.index-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.index-entry > span {
  color: var(--fg1);
}

a {
  color: var(--text-link); /* gruvbox blue */
  /* color: black; */
  text-decoration: none;
  /* text-decoration-style: dotted; */
}
a:hover {
  /* color: red; */
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 2rem 0 0.5rem;
}
h1 {
  aspect-ratio: 12;
}

/* Turn cross-document view-transitions on */
/* Note that this at-rule is all that is needed to create the default cross-fade animation  */

/* @media (prefers-reduced-motion: no-preference) { */
@view-transition {
  navigation: auto;
}
/* } */