html {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  font-size: 1rem;
  --color: off-white;
}

header,
section {
  margin: 1rem auto;
  max-width: 1024px;
}

#titleAndCards {
  display: flex;
  justify-content: center;
}

#titleAndCards img {
  width: 90px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

#titleAndCards h1 {
  padding: 10px;
  border: 0;
  margin: 0;
  align-self: center;
}
#titleAndCards .subhead {
  font-size: large;
  font-style: italic;
  margin: 0.5rem auto;
}

header > p {
  text-align: center;
  font-size: larger;
  font-weight: bold;
  margin: 0.5rem auto;
}

#headerCards {
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerCard {
  text-align: center;
  flex: 1;
}

.headerCard > p {
  margin: 0;
  font-size: larger;
  font-style: italic;
}

.headerCard > h2 {
  margin: 0;
}

#filterCards {
  display: flex;
  justify-content: center;
}

.filterCard {
  flex: 1;
}
details {
  margin: 1rem auto;
  border: 1px solid lightgrey;
  border-radius: 0.25rem;
}

details > summary {
  font-size: large;
  background-color: gainsboro;
  cursor: pointer;
}
details > summary:hover {
  background-color: lightgray;
}

table {
  text-align: left;
  border-collapse: collapse;
  --color: #c1e1c1;
  margin: 0 auto;
}

th,
td {
  border: 1px solid;
}

th,
caption {
  text-align: start;
}

thead {
  border-block-end: 2px solid;
  background: var(--color);
}

th,
td {
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color), transparent 60%);
}

tbody td:first-child {
  text-align: end;
}

.acab {
  cursor: help;
}