button,
a.button {
  border-radius: 0.5rem;
  border: 1px solid transparent;
  color: inherit;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #0b0d0f;
  cursor: pointer;
  border: 1px solid hsla(0, 0%, 50%, 0.3);
  border-bottom-color: hsla(0, 0%, 0%, 0.3);
  border-right-color: hsla(0, 0%, 0%, 0.3);
  box-shadow: 0 42px 42px -42px inset #221828;
}
button:hover,
a.button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible,
a.button:focus,
a.button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

button.subtle {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  box-shadow: none;
}
button.bad {
  color: tomato;
}

.button-group {
  display: flex;
  overflow-x: auto;
  /*justify-content: center;*/
  max-width: 100%;
}
.button-group button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0.5px;
}
.button-group button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0.5px;
}
.button-group > button {
  color: #888;
}
.button-group > button.current {
  font-weight: bold;
  /*color: #88cc77;*/
  color: skyblue;
  box-shadow: 0 -42px 42px -42px inset #221828;
}