* {
  box-sizing: border-box;
  /* margin: 0;
  padding: 0; */
}

body {
  --primary-color: lightsteelblue;
  --active-color: steelblue;
  --primary-background: lightslategray;
  --primary-background-30: #d5dadf; /* 30% lightslategray */
  --card-background: #fbfbfb;
  --section-background: #f1f1f1;
  --box-shadow: 2px 2px 4px 2px lightslategray;
  --card-background-warning: darksalmon;
  --focus-outline: 4px dotted var(--primary-background);
  --focus-outline-offset: -4px;
  font-size: 16px;
  margin: 1rem 2rem;
  background-color: var(--primary-background);
  display: flex;
  justify-content: center;
  font-family: system-ui;
}

body *:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset)
}

body > div {
  flex-grow: 1;
  max-width: 400px;
}

h1 {
  font-size: 2rem;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

button {
  background-color: var(--primary-color);
  border-radius: 8px;
  min-height: 3rem;
  color: black;
  font-family: inherit;
  font-size: inherit;
}

button:disabled {
  background-color: var(--primary-background-30);
}