:root {
  --bg-color: #fff;
  --text-color: #040101;
  --header-color: #222;
  --link-color: #39c;
  --link-hover: #069;
  --pre-bg: #f8f8f8;
  --pre-border: #e5e5e5;
  --code-color: #333;
  --h2-color: #393939;
  --h3-h6-color: #494949;
  --small-link-color: #777;
  --header-ul-bg: #f4f4f4;
  --header-ul-border: #e0e0e0;
  --header-ul-link: #999;
  --header-ul-active: #f0f0f0;
  --dt-th-color: #444;
}

body.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #d9d9d9;
  --header-color: #fff;
  --link-color: #70c0ff;
  --link-hover: #4da8ff;
  --pre-bg: #2d2d2d;
  --pre-border: #404040;
  --code-color: #d9d9d9;
  --h2-color: #cccccc;
  --h3-h6-color: #bbbbbb;
  --small-link-color: #999;
  --header-ul-bg: #2d2d2d;
  --header-ul-border: #404040;
  --header-ul-link: #aaaaaa;
  --header-ul-active: #383838;
  --dt-th-color: #bbbbbb;
}

.gpa-display {
    font-weight: 500;
    color: var(--header-color);
  }
  
  table input {
    border: 1px solid var(--pre-border);
    border-radius: 3px;
    padding: 2px 5px;
    font: inherit;
    color: var(--text-color);
    background-color: var(--bg-color);
  }
  
  table input:focus {
    outline: none;
    border-color: var(--link-color);
  }