button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --color: #213547;
    --select-text-color: black;
    --footer-bg-color: white;
    --colorlabel-text: black;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* background-color: rgb(56, 56, 61); */
    --background-color: #213547;
    --color: white;
    --select-text-color: black;
    --footer-bg-color: rgb(34, 38, 53);
    --colorlabel-text: white;
  }
}


body {
  background-color: var(--background-color);
  color: var(--color);
}

select {
  background-color: var(--background-color);
  color: var(--select-text-color);
}

p {
  color: var(--color);
}

.card {
  background-color: var(--footer-bg-color);
  color: var(--color);
}

h1 {
  margin-bottom: 200px;
}

#colorlabel {
  color: var(--colorlabel-text);
}