button {
  padding: 1em 0.8em;
  font-family: inherit;
  background: #4d4433;
  color: black;
  border: none;
  border-radius: 3px;
  transition:background-color 0.2s ease-in-out;
}
button:hover {
  background: #9a8866;
  transition:background-color 0.2s ease-in-out;
  color: white;
  cursor: pointer;
}

#search_input {
  padding: 1em 0.8em;
  min-width: 25%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 100px #413d34,0 0 6px rgba(232,190,107,.8);
  background: #000;
  color: #9a8866;
  float: right;
  font-family: inherit;
}
#search_input:focus {
    outline: 0;
}

a {
    color: #9a8866;
}

body {
  background: #2d2d2f;
  color: #c7c5b3;
  font-family: Bender;
}
body * {
    letter-spacing: 0.01em;
}
thead {
  background: rgba(0,0,0,.4);
  position: sticky;
  top: 0;
}
table {
  margin-top: 1em;
  border: 2px solid black;
  border-radius: 4px;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 0.5em;
}
tbody > tr:nth-child(odd of :not(.hidden)) {
  background: #343434;
}

.hidden {
    display: none;
}

th {
    cursor: pointer;
    user-select: none;
    border: 1px solid black;
    transition:border 0.2s ease-in-out
}

th::after {
    content: ' ▼';
    visibility: hidden;
    user-select: none;
}

th.sorted::after {
    visibility: visible;
}

th.sorted[data-descending="false"]::after {
    content: ' ▲';
}

.sorted {
    border: 1px solid #9a8866;
    transition:border 0.2s ease-in-out
}

@media (max-width: 400px) {
    th, td, body, html {
        padding: 0;
        margin: 0;
    }
    #search_input {
        width: 90%;
        margin: auto;
        float: none;
        display: block;
    }
    button {
        margin: auto;
        margin-bottom: 1em;
        display: block;
        width: 90%;
    }
    th {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    table {
        border: none;
        font-size: small;
    }
}