/* Molokai palette overrides for gum.
   Layered on top of gumby.css + style.css via CUSTOM_CSS_FILES so gum's
   structural CSS stays intact and the molokai palette wins on color. */

:root {
  --molokai-bg:        #272822;
  --molokai-bg-soft:   #3e3d32;
  --molokai-bg-deep:   #1b1d1e;
  --molokai-fg:        #f8f8f2;
  --molokai-comment:   #75715e;
  --molokai-red:       #f92672;
  --molokai-orange:    #fd971f;
  --molokai-yellow:    #e6db74;
  --molokai-green:     #a6e22e;
  --molokai-cyan:      #66d9ef;
  --molokai-purple:    #ae81ff;
}

html, body {
  background-color: var(--molokai-bg);
  color: var(--molokai-fg);
}

.container, .container.nopad, .container.nopad.bg {
  background-color: var(--molokai-bg);
}

/* Header */
#banner {
  background-color: transparent;
  border-bottom: 1px solid var(--molokai-bg-soft);
}
#banner h1 a {
  color: var(--molokai-cyan);
}
#banner h1 a strong {
  color: var(--molokai-orange);
  font-weight: normal;
}

/* Navigation bar */
#navigation,
#navigation.navbar {
  background-color: var(--molokai-bg-deep);
  border-bottom: 1px solid var(--molokai-bg-soft);
}
#navigation ul li a,
#navigation a.toggle {
  color: var(--molokai-fg);
}
#navigation ul li a:hover,
#navigation ul li.active a {
  color: var(--molokai-green);
}

/* Generic links */
a {
  color: var(--molokai-cyan);
}
a:hover,
a:focus {
  color: var(--molokai-green);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--molokai-fg);
}
.entry-title,
.entry-title a {
  color: var(--molokai-cyan);
}
.entry-title a:hover {
  color: var(--molokai-green);
}

/* Article meta */
.post-info,
.post-info abbr,
abbr.published {
  color: var(--molokai-comment);
}
.vcard.author .url.fn {
  color: var(--molokai-purple);
}

/* Sidebar */
.three.columns h4 {
  color: var(--molokai-red);
  border-bottom: 1px solid var(--molokai-bg-soft);
  padding-bottom: 0.3em;
}
.three.columns ul li a {
  color: var(--molokai-cyan);
}
.three.columns ul li a:hover {
  color: var(--molokai-green);
}

/* Buttons */
.btn,
.btn.primary,
.btn.medium {
  background-color: var(--molokai-cyan) !important;
  color: var(--molokai-bg) !important;
  border-color: transparent !important;
}
.btn:hover,
.btn.primary:hover,
.btn.medium:hover {
  background-color: var(--molokai-green) !important;
  color: var(--molokai-bg) !important;
}
.btn.twitter,
.btn.facebook {
  background-color: var(--molokai-red) !important;
  color: var(--molokai-bg) !important;
}

/* Tag labels in the article footer */
.tag-row .label,
a.danger.label,
.label.danger {
  background-color: var(--molokai-orange) !important;
  color: var(--molokai-bg) !important;
}

/* Inline code */
code,
p code,
li code {
  background-color: var(--molokai-bg-soft);
  color: var(--molokai-orange);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* Code blocks (Pygments wraps in .highlight) */
.highlight {
  background-color: var(--molokai-bg-deep) !important;
  border: 1px solid var(--molokai-bg-soft);
  border-radius: 4px;
}
.highlight pre {
  background-color: transparent !important;
  color: var(--molokai-fg);
}

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--molokai-purple);
  background-color: var(--molokai-bg-soft);
  color: var(--molokai-fg);
  padding: 0.5em 1em;
}

/* Tables */
table {
  border-color: var(--molokai-bg-soft);
}
table th {
  background-color: var(--molokai-bg-soft);
  color: var(--molokai-yellow);
}
table td {
  border-color: var(--molokai-bg-soft);
}

/* Horizontal rules */
hr {
  border-color: var(--molokai-bg-soft);
}

/* Selection */
::selection {
  background: var(--molokai-yellow);
  color: var(--molokai-bg);
}

/* Footer */
footer#credits {
  background-color: var(--molokai-bg-deep);
  color: var(--molokai-comment);
  border-top: 1px solid var(--molokai-bg-soft);
}
footer#credits a {
  color: var(--molokai-cyan);
}
footer#credits a:hover {
  color: var(--molokai-green);
}
footer .socbtns .btn a {
  color: var(--molokai-bg) !important;
}