:root {
  --color-accent: #0066dd;
  --color-accent-fg: #fff;
  --color-bg-default: #fff;
  --color-text-default: #0d0d0d;
  --color-text-light: #222;
  --grid-half: calc(var(--grid-1) / 2);
  --grid-1: 8px;
  --grid-2: calc(var(--grid-1) * 2);
  --grid-3: calc(var(--grid-1) * 3);
  --grid-4: calc(var(--grid-1) * 4);
  --transition-duration: 0.2s;
}

html {
  background: var(--color-bg-default);
}

html,
button,
input,
select {
  color: var(--color-text-default);
  font: 16px/1.6 system-ui, Helvetica, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: var(--grid-2);
  margin: 0 auto;
}

a {
  color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 1.5em 0 1em;
}

h1 {
  font-size: 2rem;
  margin: 0 0 1em;
}

h2 {
  font-size: 1.4rem;
}

body > header,
body > main,
body > footer {
  margin: 0 auto;
  max-width: calc(var(--grid-1) * 96);
}

.icon {
  fill: currentColor;
  height: 32px;
  width: 32px;
}

/* -- Header ---------------------------------------------------------------- */
body > header {
  text-align: center;
}

.searchControls {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin: auto;
  max-width: calc(var(--grid-1) * 56);
  width: 100%;
}

search button,
search input {
  border-radius: 4px;
  height: 2rem;
}

search input {
  background: var(--color-bg-default);
  border: 1px solid #ddd;
  flex-grow: 4;
  padding: 0 var(--grid-1);
  -webkit-appearance: textfield;
}

search button {
  background: var(--color-accent);
  border: 1px solid transparent;
  color: var(--color-accent-fg);
  flex-grow: 1;
  margin-left: var(--grid-half);
}

/* -- Footer ---------------------------------------------------------------- */
body > footer {
  font-size: 0.8rem;
  padding: var(--grid-4) 0 0;
  text-align: center;
}

/* -- Content --------------------------------------------------------------- */
body > main {
  padding: var(--grid-2) 0;
}

.centered {
  text-align: center;
}

dl {
  margin: 0 auto;
  text-align: left;
  width: fit-content;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
  padding-bottom: var(--grid-1);
}

dd:last-child {
  padding-bottom: 0;
}

table {
  border-collapse: collapse;
  margin: auto;
  min-width: 50%;
}

table td,
table th {
  padding: var(--grid-half);
  text-align: left;
}

table th[scope="row"] {
  text-align: right;
}

table th {
  font-weight: bold;
}