:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: #FFFFFF;
  --light-color: #000000;
  --light-btn: #4CAF50;

  --dark-bg: #181A1B;
  --dark-color: #E8E6E2;
  --dark-btn: #3D8C40;
}

* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

.button {
  background-color: light-dark(var(--light-btn), var(--dark-btn));
  border: none;
  color: light-dark(var(--light-color), var(--dark-color));
  padding: 20px 100px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid light-dark(var(--light-btn), var(--dark-btn));
  transition-duration: 0.4s;
  margin-bottom: 50px;
  width: 80px;
  height: 20px;
}

.button:hover {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}