body {
  font-family: Iosevka SS14, monospace;
  font-size: large;
  background-color: #323d43;
  color: #d8cacc;
}

h1 {
  font-family: Iosevka SS14, monospace;
  text-align: center;
  margin: 0px auto 20px auto;
  padding: 10px 0px;
  border-radius: 4px;
  width: 100%;
  max-width: 800px;
  background-color: #525c62;
  font-size: xx-large;
}

#title {
  background-color: initial;
}

.sortable {
  border-spacing: 0;
  width: 100%;
  max-width: 800px;
  margin: 20px auto 80px auto;
}

.sortable tbody tr:nth-child(odd) {
  background: #525c62;
}

.sortable td,
.sortable th {
  padding: 10px;
}

.sortable td:first-child,
.sortable th:first-child {
  border-top-left-radius: 4px;
}

.sortable td:last-child,
.sortable th:last-child {
  border-top-right-radius: 4px;
}

.sortable th {
  background: #dbbc7f;
  color: #3c474d;
  cursor: pointer;
  font-weight: normal;
  text-align: left;
  text-transform: capitalize;
  vertical-align: baseline;
  /* white-space: nowrap; */
}

.sortable th:hover {
  color: #415c6d;
}

.sortable th:hover::after {
  color: inherit;
  font-size: 1.2em;
  content: " \025B8";
}

.sortable th::after {
  font-size: 1.2em;
  color: transparent;
  content: " \025B8";
}

.sortable th.dir-d {
  color: #415c6d;
}

.sortable th.dir-d::after {
  color: inherit;
  content: " \025BE";
}

.sortable th.dir-u {
  color: #415c6d;
}

.sortable th.dir-u::after {
  color: inherit;
  content: " \025B4";
}