:root {
  /* fallback if JS hasn't run yet (default dark) */
  --bg: rgba(24, 24, 27, 0.85);
  --text: #e8e8e8;
  --link: #8ab4f8;
  --circle-bg: #ffffff;
  --circle-shadow: rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] {
  --bg: rgba(24, 24, 27, 0.85);
  --text: #e8e8e8;
  --link: #8ab4f8;
  --circle-bg: #ffffff;
  --circle-shadow: rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #333333;
  --link: #0645ad;
  --circle-bg: #ffffff;
  --circle-shadow: rgba(0, 0, 0, 0.12);
}

html, body {
  background: var(--bg);
  color: var(--text);
}
a {
  color: var(--link);
}

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}