html, body {
  --body-bg: #000;
  --body-fg: #fff;
  --tile-bg: #181818;
  --grey: grey;
  --red: #ff2d2d;
  --green: #0f4e0f;
  --orange: #d4b22e;
  --dark: #0a0a0a;
  --radius: 10px;
  --cols: 4;
  --rows: 3;

  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  overflow: hidden;
}

.theme-light {
  --body-bg: #d6d6d6;
  --body-fg: #000;
  --tile-bg: #dedede;
  --dark: #c2c2c2;
}

.mb {
  margin-bottom: 1rem;
}

button {
  transition: linear 0.4s;
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
  padding: 1rem;
  color: inherit;
  font: inherit;
}

.btn {
  border: 1px solid var(--body-fg);
  padding: 0.7rem;
  border-radius: var(--radius);
}

.btn:hover {
  background-color: var(--dark);
}

label {
  display: block;
  margin-bottom: 1rem;
}

label input,
label select {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}