:root[data-theme="light"] {
  --bg-main: #e9e9e9;
  --bg-secondary: #dddddd;
  --bg-topbar: #dddddd;
  --bg-button: #d7d7d7;

  --text-main: #191919;
  --text-secondary: #ffffff;

  --bg-selection: #1515158e;
  --text-selection: #ffffff;

  --border-main: #303030;

  --trapped-specimen: rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] {
  --bg-main: #151515;
  --bg-secondary: #303030;
  --bg-topbar: #202020;
  --bg-button: #303030;

  --text-main: #ffffff;
  --text-secondary: #191919;
  --text-link: #aae8ff;
  --text-link-hover: #aaaaee;

  --bg-selection: #cccccc8e;
  --text-selection: #000000;

  --border-main: #888888;

  --trapped-specimen: rgba(100, 100, 100, 0.25);
}

.testing {
  color: #ffffff;
  background-color: #cc4444;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
}

::selection {
  color: var(--text-selection);
  background: var(--bg-selection);
}

#pebgpt {
  background-color: var(--bg-topbar);
  border-color: var(--border-main);
}

#trappedspecimen {
  text-shadow: none;
  color: var(--trapped-specimen);
}

/* haven't done anything with regular links yet */

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

a:link,
a:visited {
  color: var(--text-link);
}

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

div.topbar {
  background-color: var(--bg-topbar);
}

.topbar a:link,
.topbar a:visited {
  color: var(--text-main);
  background-color: transparent;
}

.topbar a:hover {
  color: var(--text-secondary);
  background-color: var(--text-main);
}

.topbar button {
  background-color: transparent;
}

button {
  color: var(--text-main);
  background-color: var(--bg-button);
  box-shadow: 2px 2px var(--bg-selection);
}

button:hover {
  color: var(--text-secondary);
  background-color: var(--text-main);
}