body .button {
  color: black;
  width: auto;
  padding: 0.5em 1em;
  font-weight: 600;
  border: 1px solid var(--dark-grey-light);
  border-radius: 8px;
  box-shadow: 5px 5px 1px var(--light-grey-light);
  cursor: pointer;
}

body .button a {
  color: inherit;
}

body .button-copy {
  background: var(--background-light);
  color: black;
}

body .button-filter {
  background: var(--yellow-light);
}

body .button-login {
  font-size: 1.2em;
  background: var(--blue-light);
}

body .button-signup {
  font-size: 1.2em;
  background: var(--green-light);
}

body .button-new-pick {
  background: var(--mint-light);
}

body .button-create-pick {
  background: var(--mint-light);
  font-size: 1.2em;
}

body .button-new-pool {
  background: var(--cyan-light);
}

body .button-create-pool {
  font-size: 1.2em;
  background: var(--cyan-light);
}

body .button-join-pool {
  background: var(--purple-light);
}

body .button-create-entry {
  font-size: 1.2em;
  background: var(--purple-light);
}

@media (prefers-color-scheme: dark) {
  body .button {
    background: var(--background-dark);
    border: 1px solid var(--light-grey-dark);
    box-shadow: 5px 5px 1px var(--dark-grey-dark);
  }

  body .button-copy {
    background: var(--background-dark);
    color: white;
  }

  body .button-login {
    background: var(--blue-dark);
  }

  body .button-signup {
    background: var(--green-dark);
  }

  body .button-filter {
    background: var(--yellow-light);
  }

  body .button-new-pick {
    background: var(--indigo-dark);
  }

  body .button-create-pick {
    background: var(--indigo-dark);
    font-size: 1.2em;
  }

  body .button-new-pool {
    background: var(--cyan-dark);
  }

  body .button-create-pool {
    background: var(--cyan-dark);
  }

  body .button-join-pool {
    background: var(--purple-dark);
  }

  body .button-create-entry {
    background: var(--purple-dark);
  }
}