:root {
  --bg-light: #EEEEEE;
  --bg-dark: #111111;
  --text-light: #222222;
  --text-dark: #DDDDDD;
  --bg-root-light: #DDDDDD;
  --bg-root-dark: #222222;

  --bg-default: var(--bg-dark);
  --bg-root-default: var(--bg-root-dark);
  --text-default: var(--text-dark);

  --bg-other: var(--bg-light);
  --bg-root-other: var(--bg-root-light);
  --text-other: var(--text-light);

  background-color: var(--bg-root-default);
  transition: background-color 0.3s;
}

body {
  background-color: var(--bg-default);
  color: var(--text-default);
  transition: background-color 0.3s;
  transition: color 0.3s;
  padding: 2% 2%;
  margin: 2% 2%;
}

a:visited {
  color: rgb(86, 86, 155);
}
a:link {
  color: blueviolet;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-default: var(--bg-light);
    --bg-root-default: var(--bg-root-light);
    --text-default: var(--text-light);
    --bg-other: var(--bg-dark);
    --bg-root-other: var(--bg-root-dark);
    --text-other: var(--text-dark);
  }
  /* body {
    background-color: var(--bg-light);
    color: var(--text-light);
  }
  :root {
    background-color: var(--bg-root-light);
  } */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

body:has(> input#toggle-theme:checked) {
  background-color: var(--bg-other);
  color: var(--text-other);
}
:root:has(input#toggle-theme:checked) {
  background-color: var(--bg-root-other);
}

input#toggle-theme {
  opacity: 0;
  position: absolute;
}
label[for="toggle-theme"] {
  background-color: var(--bg-root-default);
  border-radius: 20%;
  border: 2px solid;
  padding: 5px;
  transition: background-color 0.3s;
  transition: border-color 0.3s;
}
label[for="toggle-theme"]:hover {
  opacity: 0.9;
}
input#toggle-theme:checked ~ label[for="toggle-theme"] {
  background-color: var(--bg-root-other);
}