/* Minimal refresh for the original LWTA pages */

:root {
  --ink: #2b2b2b;
  --muted: #6b625c;
  --accent: #8b1e1e;
  --paper: #fbf8f1;
  --rule: #ddd5c8;
  --incorrect: #a33a32;
  --correct: #12429b;
  --however-correct: #0084ff;
  --however-incorrect: #ca5100;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: #eee9df;
}

body {
  box-sizing: border-box;
  max-width: 52rem;
  margin: 2rem auto;
  padding: 2rem 2.5rem;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
  box-shadow: 0 2px 18px rgb(0 0 0 / 8%);
}

.f-arial {
  font-family: var(--sans);
}

.s-plus1 {
  font-size: 1rem;
}

.c-990000,
h1 {
  color: var(--accent);
}

/* Softer replacements for the original bright red/green example text */
.c-ff0000 {
  color: var(--incorrect);
}

.c-006600 {
  color: var(--correct);
}

.c-009900 {
  color: var(--correct);
}

.c-009999 {
  color: var(--however-correct);
}
.c-ca5100 {
  color: var(--however-incorrect);
}

.c-cc0000 {
  color: var(--however-incorrect);
}

h1 {
  margin: .35em 0;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.15;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 .f-arial,
h2 .f-arial,
h3 .f-arial,
h4 .f-arial,
h5 .f-arial,
h6 .f-arial {
  font-family: Georgia, "Times New Roman", serif;
}

/* Navigation and index links use the same sans-serif face throughout. */
body > a[target="_top"],
body > span a,
body > div:first-of-type > a,
body > div:first-of-type > span a,
body > ul li a,
.index-letters a {
  font-family: var(--sans);
}

.centre {
  text-align: center;
}

p {
  margin: 1.1em 0;
}

a[href] {
  color: #245a86;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

a[href]:hover,
a[href]:focus-visible {
  color: var(--accent);
}

.index-letters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.index-letters a {
  display: inline-flex;
  min-width: 1.8rem;
  min-height: 1.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: .2rem;
  background: #f3eee5;
  text-decoration: none;
  font-weight: bolder;
}

.index-letters a:hover,
.index-letters a:focus-visible {
  border-color: var(--accent);
  background: #fffaf0;
}

ul {
  padding-left: 0;
}

li {
  margin: .35rem 0;
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--rule);
}

li img {
  vertical-align: middle;
  margin-right: .35rem;
}

@media (max-width: 600px) {
  body {
    margin: 0;
    padding: 1.25rem;
    box-shadow: none;
  }
}