html {
  --main-fg-color: #070605;
  --main-bg-color: #fffefd;
  --outside-bg-color: antiquewhite;
  --highlight-bg-color: #f8f8f5;
  --input-bg-color: antiquewhite;
  --better-bg-color: #d2f5d2;
  --worse-bg-color: #ffe9eb;
  --small-radius: 0.2em;
  --large-radius: 1em;

  background-color: var(--outside-bg-color);
  height: 100%;
}
body {
  width: 44em;
  font-family: arial, sans-serif;
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
  margin: 0;
  padding: 0 2em;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
header {
  text-align: center;
  margin: 2em;
  h1 {
    font-family: baskerville, georgia, serif;
    margin: 0;
  }
  p {
    margin: 0;
  }
}
footer {
  margin: 4em 0 2em;
  text-align: center;
}
h2 {
  margin-top: 2em;
}
table {
  width: 100%;
  border-spacing: 0 2px;
}
fieldset {
  border: none;
  padding: 0;
  legend {
    font-weight: bold;
  }
}
abbr {
  text-decoration: none;
}
img {
  max-width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.5em;
}
[draggable="true"] {
  color: gray;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  &:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}
.better {
  background-color: var(--better-bg-color);
}
.worse {
  background-color: var(--worse-bg-color);
}
.diff {
  font-weight: bold;
  border-radius: var(--small-radius);
}
.option {
  color: var(--main-bg-color);
  padding: 0 0.5em;
  border-radius: var(--small-radius);
  font-weight: normal;
}
.hbar {
  background-color: var(--main-bg-color);
  display: inline-block;
}
.input {
  background-color: var(--input-bg-color);
}
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
}
.hide {
  display: none;
}
.left {
  float: left;
}
.right {
  float: right;
}
form#settings {
  border-radius: var(--large-radius);
  padding: 1em;
  margin: 2em 0 0;
  ul {
    list-style: none;
    padding: 0;
    margin: 0.5em 0;
  }
}
table#choose {
  table-layout: fixed;
  tfoot {
    background-color: var(--input-bg-color);
  }
  th[scope="row"] {
    font-weight: normal;
  }
  td:nth-child(1),
  th:nth-child(1) {
    text-align: end;
  }
  td:nth-child(2),
  th:nth-child(2) {
    text-align: center;
    width: 25%;
  }
  td:nth-child(3),
  th:nth-child(3) {
    text-align: start;
  }
  img {
    height: 11em;
  }
}
table#ranking {
  counter-reset: rank -1;
  thead {
    text-align: left;
  }
  tr {
    counter-increment: rank;
    td:nth-child(2)::before {
      content: counter(rank);
    }
    td {
      padding-left: 0.2em;
      padding-right: 0.2em;
    }
  }
}