$bg: #444444
$mg: #222222
$fg: #B4B4B4

$dim: #8A8A8A
$bright: #C8C8C8
$dimmer: #767676
$brighter: #DADADA

$accent1: #71c9ec
$accent2: #f8d34a
$accent3: #4cc17f
$accent4: #d77942

body
  background-color: $bg
  color: $fg
.container
  background-color: $bg
.content
  background-color: $mg
  h1, h2, h3, h4, h5, h6
    color: $brighter
.main
  .target:target
    animation: 2s attention ease-out

  .period
    color: $dimmer
header, footer
  color: $dimmer

.dark
  color: $bg
.darker
  color: $bg
  opacity: 0.5
.dim
  color: $dim
.dimmer
  color: $dimmer
.bright
  color: $bright
.brighter
  color: $brighter

.main
  b
    color: $accent3
  em
    color: $accent1
  h1
    color: $fg
  .description, .options
    em
      color: $accent1
  .options b
      color: $accent3
  .synopsis
    .desc > p > b
      color: $accent3
  .history
    .job
      color: $accent3

.target a, a.target
  text-decoration: none
  border: none
  color: inherit
  &:visited
    color: inherit
  &:hover
    color: inherit

a
  text-decoration: none
  border-bottom: 1px dotted grey
  color: inherit
  &:visited
    color: inherit
  &:hover, &:focus
    color: $accent2

#phone-hint
  color: $dimmer

@keyframes attention
  70%
    color: $accent2
  100%
    color: auto