\:root
  color-scheme: dark
  --color-blue: hsl(189, 100%, 65%)
  --color-green: hsl(150, 77%, 69%)
  --color-yellow: hsl(60, 100%, 84%)
  --color-cream: hsl(65, 27%, 83%)
  --color-red: hsl(354, 100%, 73%)
  --color-orange: hsl(31, 100%, 73%)
  --color-purple: hsl(314, 100%, 78%)
  --color-bright: hsl(197, 0%, 100%)
  --color-gray: hsl(197, 31%, 85%)
  --color-dark: hsl(197, 17%, 62%)
  --color-shadow: hsl(197, 10%, 39%)
  --color-black: hsl(197, 10%, 14%)
  --background: hsl(197, 6%, 8%)
  --panel-background-bright: hsl(197, 14%, 14%)
  --panel-background: hsl(197, 14%, 11%)
  --panel-background-dark: hsl(197, 14%, 8%)
  --color: var(--color-gray)
  --lane-height: 3rem
  --timeline-header-width: 18rem

$BRIGHTENER: rgba(white, 0.02)
$DARKENER: rgba(black, 0.04)

@mixin panel-background-bright
  background-color: var(--panel-background-bright) !important

@mixin panel-background
  background-color: var(--panel-background)

@mixin panel-background-dark
  background-color: var(--panel-background-dark) !important

@mixin panel-background-chess
  background-image: linear-gradient(45deg, var(--panel-background-bright) 25%, var(--panel-background) 25%, var(--panel-background) 50%, var(--panel-background-bright) 50%, var(--panel-background-bright) 75%, var(--panel-background) 75%, var(--panel-background) 100%)
  background-size: 5.66px 5.66px
  background-color: var(--panel-background-bright)