:root {
  color-scheme: dark;
  --font-size: 1rem;
  --accent-hex: gray;
  --color: rgb(204, 204, 204);
  --muted-color: rgba(204, 204, 204, .75);
  --background: black;
  --border-color: var(--accent-hex);
  --border-radius: .35rem;
  --primary-background: var(--accent-hex);
  --primary-color: var(--accent-hex);
  --primary-hover-background: rgba(255, 255, 255, .04);
  --primary-border: var(--accent-hex);
  --secondary-color: rgb(163, 163, 163);
  --secondary-background: #141414;
  --secondary-hover-background: rgba(255, 255, 255, .04);
  --secondary-border: rgb(46, 46, 46);
  --contrast-color: black;
  --contrast-background: white;
  --contrast-hover-background: rgba(255, 255, 255, .75);
  --contrast-border: rgba(255, 255, 255, .75);
  --input-spacing-vertical: .5rem;
  --input-spacing-horizontal: .5rem;
  --input-border: rgba(255, 255, 255, .1);
  --input-background:  rgba(255, 255, 255, .06);
  --input-hover-background:  rgba(255, 255, 255, .08);
  --input-focus-border: rgba(var(--accent-rgb), .8);
  --navbar-height: 4rem;
  --sidebar-width: 250px;
  --player-height: 7rem;
}

@media(max-width: 850px) {
  :root {
    --sidebar-width: 350px;
  }
}