@media (prefers-color-scheme: light) {
    :root {
      /* Change me */
      --accent: #5346c4;
      --color-primary: #24292e;
      --color-secondary: rgb(100, 100, 100);
      --color-bg: white;
      --color-shadow: rgba(0, 0, 0, 0.1);
      --item-bg: #f5f5f5;

      --color-accent-1: rgba(83, 70, 196, 1);
      --color-accent-1-light: rgba(83, 70, 196, 0.3);
      --color-accent-1-lightest: rgba(83, 70, 196, 0.1);
      --color-accent-2: rgba(103, 95, 171, 1);
      --color-accent-2-light: rgba(103, 95, 171, 0.3);
      --color-accent-2-lightest: rgba(103, 95, 171, 0.1);
    }
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      /* Change me */
      --accent: rgb(249, 31, 136);
      --color-primary: white;
      --color-secondary: #ccc;
      --color-bg: #24292e;
      --color-shadow: #ccc;
      --item-bg: #2d3339;

      --color-accent-1: rgb(249, 31, 136);
      --color-accent-1-light: rgb(101, 115, 129);
      --color-accent-1-lightest: rgba(83, 70, 196, 0.1);
      --color-accent-2: rgba(103, 95, 171, 1);
      --color-accent-2-light: rgba(103, 95, 171, 0.3);
      --color-accent-2-lightest: rgba(103, 95, 171, 0.1);
    }
  }
  
  :root {
    --scrollbar-bg: var(--color-bg);
    --scrollbar-thumb: var(--color-secondary);
    --shadow-shape: 2px 5px 8px;
    --border-radius: 6px;
  }

  :root {
    --content-width: 700px;
    --content-margin: 1.5rem;
    --content-padding: 1.5rem;
    --item-margin: 1rem;
  }

  @media (max-width: 640px) {
    :root {
      --content-width: 100%;
      --content-margin: 0.5rem;
      --content-padding: 1rem;
      --item-margin: 0.5rem;
    }
  }