:root {
  --primary-color: #f0f0f0;
  --secondary-color: white;

  --nav-background-color: #333;

  --text-color: #000;
  --text-muted: #555;

  --table-head-background-color: #e1e1e1;

  --container-width: 580px;
  --container-max-width: 903px;

  --furry-button-color: #ffcaa6;
  --furry-button-color-hover: #ffa974;

  --furry-background-color: white;
  --furry-decoration-color: #ff7f50;

  --furry-list-element-color: #fff4e6;
  --furry-list-element-color-hover: #ffeede;

  --story-text-color: #33ff33;
  --story-press-any-key-color: #ccc;
  --story-background-color: radial-gradient(circle at center, #222 0%, #000 100%);

  --story-button-color: #0d0d0d;
  --story-button-hover-color: #003300;

  --story-sidebar-background-color: black;
  --story-boot-logo-color: #ffaa00;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --primary-color: #353535;
    --secondary-color: #1f1f23; */
    /* --primary-color: #2a2640;
    --secondary-color: #3a3458; */
    --primary-color: #1e1e2f;
    --secondary-color: #2a2a3d;

    --nav-background-color: #272424;

    --text-color: #cec9da;
    --text-muted: #999;

    --table-head-background-color: var(--secondary-color);

    --furry-button-color: #b67616;
    --furry-list-element-color: #252231;
    --furry-list-element-color-hover: var(--primary-color);
  }
}