$primaryLightest: #ffd46b;
$primaryLight: #ffc842;
$primary: #ffbb11;
$primaryDark: #ce9300;
$primaryDarkest: #a27400;

$complementLightest: #6373c8;
$complementLight: #4053b7;
$complement: #2037ae;
$complementDark: #11258d;
$complementDarkest: #0b1b6f;

// Number refers to percentage darkness
$bg0: #121a1d;
$bg1: #151d20;
$bg2: #171e21;
$bg3: #192124;
$bg4: #1b2326;
$bg5: #1e2629;
$bg7: #232a2d;
$bg8: #252c2f;
$bg9: #272f31;
$bg11: #2c3336;
$bg12: #2f3638;
$bg14: #333a3d;
$bg15: #353c3f;
$bg16: #383f41;

$largeHeader: #bbb;
$smallheader: #ccc;
$smallSubHeader: #aaa;
$textDarkBg: #999;
$textbg: #aaa;
$iconButton: #aaa;
$iconButtonHighlight: #eee;

$textFieldBg: #bbb;
$scrollBar: #6f7c7f;

$bgAccent: #b3b3b3;

$borderAccent: #383f41;
$disabled: #383f41;

$dangerous: #ff4411;

$spotify: #1db954;
$soundcloud: #ff5500;
$youtube: #ff0000;
$mixcloud: #5000ff;

@keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
  101% {
    display: block;
  }
}
