:root {
  --theme-color: #c8f264;
  --sf-bg: #0a0a0a;
  --sf-panel: #111111;
  --sf-border: #222222;
  --sf-text: #e8e8e8;
  --sf-muted: #9a9a9a;
}

body {
  background: var(--sf-bg);
}

.sidebar {
  background-color: var(--sf-panel);
  border-right: 1px solid var(--sf-border);
}

.sidebar .app-name-link {
  color: var(--sf-text) !important;
  font-weight: 600;
}

.sidebar ul li a {
  color: var(--sf-muted);
}

.sidebar ul li.active > a {
  color: var(--theme-color);
  border-right: 2px solid var(--theme-color);
}

.markdown-section {
  color: var(--sf-text);
  max-width: 52rem;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 {
  color: #fff;
  font-weight: 600;
}

.markdown-section a {
  color: var(--theme-color);
}

.markdown-section code {
  background: #1a1a1a;
  color: #f0f0f0;
  border-radius: 4px;
}

.markdown-section pre {
  background: #141414;
  border: 1px solid var(--sf-border);
}

.markdown-section table {
  display: table;
  width: 100%;
}

.markdown-section tr:nth-child(2n) {
  background: #141414;
}

.markdown-section th {
  background: #1a1a1a;
}

.markdown-section blockquote {
  border-left: 3px solid var(--theme-color);
  color: var(--sf-muted);
  background: #111;
}

.docs-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  padding: 12px 20px;
  font-size: 13px;
}

.docs-header a {
  color: var(--sf-muted);
  text-decoration: none;
  margin-left: 16px;
}

.docs-header a:hover {
  color: var(--theme-color);
}

.content {
  padding-top: 36px;
}

@media screen and (max-width: 768px) {
  .docs-header {
    display: none;
  }
  .content {
    padding-top: 8px;
  }
}