/*
 * main green: #99cc66
 * */

:root {
    --main-bg-color: #101010;
    --secondary-bg-color: #202020;
    --main-text: #ffffff;
    --main-sec: #99cc66; /* main secondary color for the site */
    --code-quote-bg: #1D1F21; /* background color for quotes and code blocks */
    --copyright: #808080; /* copyright text color */
    --border-color: #000000;
}

body {
  background: var(--main-bg-color);
  color: var(--main-text);
}

a {
  color: var(--main-text);
}

.__h_instagram.card {
  border: 1px solid var(--border-color) !important;
}

.__h_instagram .card-text {
  color: var(--main-text);
}

.__h_instagram .card-header {
  color: var(--main-bg-color);
  background-color: #101010;
}

.__h_instagram .card-body {
  color: var(--main-bg-color);
  background-color: #101010;
}

pre {
  background: var(--main-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

code {
  background-color: transparent;
}

/* 
 * syntax highlight code block table backround
 * looks better if overwritten.
 * */
.post .content .highlight table {
  background-color: var(--main-bg-color) !important;
}

blockquote {
  background: var(--main-bg-color);
  border-left: 3px solid var(--main-sec);
}

table { margin: 1em auto; border-collapse: collapse; }
table, th, td { border: 1px solid #5C5C5C; }
tr:hover { background: #1D1F21; }
th { background: var(--main-bg-color); }
.siteTitle a {
  color: var(--main-sec);
}

.post {
  background: var(--secondary-bg-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-radius: 0.2em;
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
}

.post .content h1{ color: var(--main-sec); }
.post .content h2{ color: var(--main-sec); }
.post .content h3{ color: var(--main-sec); }
.post .content h4{ color: var(--main-sec); }
.post .content h5{ color: var(--main-sec); }
.post .content h6{ color: var(--main-sec); }
.post .content a:hover { color: var(--main-sec); }
.social-link:hover { color: var(--main-sec); }
.nav-item-title:hover { color: var(--main-sec); }
.tag a:hover { color: var(--main-sec); }
.copyright { color: var(--copyright); }
.poweredby { color: var(--copyright); }
.poweredby a { color: var(--copyright); }

.post-preview {
  border: 1px solid var(--border-color);
  border-radius: 0.2em;
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
  background: var(--secondary-bg-color);
}

.post-preview .meta {
  border-bottom: 1px solid var(--border-color);
}

.post-preview .title a {
  color: var(--main-sec);
}

.post-footer-data {
  background-color: var(--main-bg-color);
  border-bottom: 1px solid var(--border-color);
}

.post-footer hr {
  color: var(--border-color);
}

.post-footer .date {
  color: #b2b2b2;
}

.post-footer .updated {
  color: #b2b2b2;
}

.content-item {
  background: var(--secondary-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 0.2em;
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
}

.content-item .meta {
  border-top: 1px dotted var(--border-color);
}

.content-item a:hover{
  text-decoration: underline;
  color: var(--main-sec);
}

.post-list .title {
  color: var(--main-sec);
}

.rmore {
  color: var(--main-text);
}

.rmore a {
  background: var(--main-bg-color);
  border: 1px solid var(--border-color);
}

.rmore a:hover {
  background: var(--secondary-bg-color) ;
}

.terms {
  background: var(--secondary-bg-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
}

.terms .term {
  border-bottom: 1px dotted var(--border-color);
}

.term a:hover {
  text-decoration: underline;
  color: var(--main-sec);
}

.err-404 {
  border: 1px solid var(--border-color);
  border-radius: 0.2em;
  background: var(--secondary-bg-color);
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
}

.alert-warning {
  border-left: 3px solid #ffb961;
}

.alert-warning .alert-heading{
  color: #ffb961;
}

.alert-caution {
  border-left: 3px solid #FF6666;
}

.alert-caution .alert-heading{
  color: #FF6666;
}

.alert-important {
  border-left: 3px solid #a0c7f8;
}

.alert-important .alert-heading{
  color: #a0c7f8;
}

.alert-note {
  border-left: 3px solid #9FE2BF;
}

.alert-note .alert-heading{
  color: #9FE2BF;
}

.alert-tip {
  border-left: 3px solid #9FE2BF;
}

.alert-tip .alert-heading{
  color: #9FE2BF;
}

.related-content {
  border: 1px solid var(--border-color);
  border-radius: 0.2em;
  box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
  background: var(---main-bg-color);
}

.related-content .title {
  font-weight: bold;
}