:root {
  color-scheme: light dark;

  --primary: light-dark(#462b1e, #ffe5d8);
  --secondary: light-dark(#cca18b, #9a7765);
  --background: light-dark(#fff2eb, #170f0b);
  --border: light-dark(#dbb3a0, #5b463c);
}

body {
  margin: auto;
  max-width: 600px;
  padding: 10em 4em;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--primary);
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 0.85rem;
  letter-spacing: 0.015em;
  line-height: 1.35;
}

div h2:not(:first-of-type) {
  margin-top: 7rem;
}

a,
a:hover,
a:visited {
  color: var(--primary);
}

h1,
h2 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  margin: 0;
}

h2 {
  color: var(--secondary);
}

h1 + h2 {
  margin-top: -0.25em;
}

table {
  /* needed for the borders */
  border-collapse: collapse;
}

@media (min-width: 600px) {
  body {
    padding: 15em 4em;
  }

  h2:has(+ table) {
    float: left;
    width: 25%;
  }

  /* h2:nth-of-type(5):has(+ p) {
    margin-top: 7rem;
    float: left;
    width: 100%;
  } */

  h2 + table {
    width: 75%;
    float: left;
  }

  table {
    margin-top: 7rem;
  }
}

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

tr:hover {
  border-bottom: 1px solid var(--secondary);
}

td {
  padding: 1em 0;
}

td a {
  text-decoration: none;
}

td + td {
  text-align: right;
  vertical-align: text-top;
  width: 100px;
}

a + a {
  margin-left: 2rem;
}