:root {
  --color-fg: #ffffff; /* full format to conform with input[type=color] requirements */
  --color-bg: #181818;

  --color-highlight: #f1661b;
  --color-highlight-fg: #ffffff;

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

  --font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
    sans-serif;
  --font-size: 13px;

  --header-height: auto;
  --footer-height: 84px;
  --side-sheet-width: 24rem;
  --sidebar-width: 21.5rem;

  --color-love: #bf2043;
  --color-success: #56a052;
  --color-primary: #0191f7;
  --color-danger: #c34848;

  --progress-bar-height: 4px;
  --fade-size: 3rem;

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