html {
  --toggle-themes: dark, light;
  --toggle-targets: [theme=dark], [theme=light];
  --current-theme: light;
  --bg-main: #fff;
  --text-main: #000;
  --bg-button: rgb(90, 46, 119);
  --text-button: #fff;
  --text-action: #248;
  --text-action-hover: #46a;
}

@media (prefers-color-scheme: dark) {
  html {
    --current-theme: dark;
    --bg-main: #000;
    --text-main: #fff;
    --bg-button: rgb(93, 206, 145);
    --text-button: #000;
    --text-action: #9af;
    --text-action-hover: #acf;
  }
}
html[theme=dark] {
  --current-theme: dark;
  --bg-main: #000;
  --text-main: #fff;
  --bg-button: rgb(93, 206, 145);
  --text-button: #000;
  --text-action: #9af;
  --text-action-hover: #acf;
}

html[theme=light] {
  --current-theme: light;
  --bg-main: #fff;
  --text-main: #000;
  --bg-button: rgb(90, 46, 119);
  --text-button: #fff;
  --text-action: #248;
  --text-action-hover: #46a;
}

.bg-main {
  background: var(--bg-main);
}

.text-main {
  color: var(--text-main);
}

body {
  padding: 0;
  margin: 0;
}

p {
  font-size: 2rem;
  line-height: 2em;
  max-width: 60rem;
}

.container {
  margin: auto;
  max-width: 35em;
}

button {
  font-size: 2rem;
  padding: 0.8em;
  color: var(--text-button);
  background: var(--bg-button);
  border: none;
  border-radius: 0.4em;
}
button:hover {
  filter: brightness(0.8);
}

a {
  color: var(--text-action);
}

a:hover, a:focus, a:active {
  color: var(--text-action-hover);
}

/*# sourceMappingURL=style.css.map */