@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,400&display=swap");

:root {
  --box-color: #ddad5d;
  --logo-color: #58ade2;
  --knight-color: #304184;
  --peasant-color: #7c4b2a;
  --monk-color: #c15020;
  --gold-color: #f5d214;
}

html {
  font-size: 20px;
  font-family: "Merriweather", serif;
}

body {
  background-color: var(--box-color);
  color: var(--knight-color);
  font-size: 1rem;
}

#score-sheet {
  width: 16rem;
}

.input-image {
  max-width: 3.5rem;
  border-radius: 4px;
}

#scores fieldset {
  margin: 12px;
}

#scores fieldset legend {
  font-weight: 700;
  font-size: 1.5rem;
}

#scores button {
  background-color: var(--logo-color);
  color: var(--monk-color);
  border: none;
  border-radius: 4px;
  width: 4ch;
  height: 4ch;
  cursor: pointer;
  margin: 4px 8px;
}

#scores button:hover,
#scores button:focus {
  background-color: var(--knight-color);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  width: 4ch;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}