body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  color: white;
  background-color: black;

  font-family: 'Atkinson Hyperlegible', 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

a {
  color: white;
}


h1, h2, h3, h4 {
  margin-top: 0;
}

button, .button {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  text-decoration: none;
  border: 1px solid white;
  cursor: pointer;

  padding: 0.25em 0.5em;
  border-radius: 0.25em;

  background: black;
  color: white;

  &:disabled {
    opacity: 0.7;
  }
}

input[type="number"], input[type="search"], input[type="text"] {
  background: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 4px;
  padding: 0.2em;


  &:focus {
    outline: solid rgba(255, 255, 255, 0.66);
  }

  &:disabled {
    opacity: 0.7;
    pointer-events: none;
  }
}

select {
  background: black;
  color: white;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  border: 1px solid white;

  &:disabled {
    opacity: 0.7;
  }
}