:root {
  --color-text-primary: #fff;
  --color-text-secondary: rgba(255, 255, 255, .7);
  --color-bg-primary: #181818;
  --color-bg-secondary: rgba(255, 255, 255, .025);
  --color-border: var(--color-bg-secondary);
  --color-highlight: #ff7d2e;
  --color-accent: var(--color-highlight);
  --color-bg-context-menu: var(--color-bg-primary);

  --color-input: #333;
  --color-bg-input: #fff;

  --bg-image: none;
  --bg-position: center;
  --bg-attachment: fixed;
  --bg-size: cover;

  --font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 500;
  --font-weight-bold: 700;

  --header-height: auto;
  --footer-height: 84px;
  --extra-drawer-width: 320px;
  --sidebar-width: 256px;

  --color-black: #181818;
  --color-maroon: #bf2043;
  --color-green: #56a052;
  --color-blue: #0191f7;
  --color-red: #c34848;

  --border-radius-input: .3rem;

  @media screen and (max-width: 768px) {
    --header-height: 56px;
    --footer-height: 96px;
    --extra-drawer-width: 100%;
  }
}

$plyr-blue: var(--color-highlight);