:root {
  --dark-primary-color: 34, 39, 46;
  --dark-secondary-color: #2d333b;
  --dark-tertiary-color: #646464;
  --dark-text-color: #cbd5e1;
}

html {
  background-color: rgb(var(--dark-primary-color));
  color: var(--dark-text-color);
  fill: var(--dark-text-color);
}

.header {
  background-color: rgba(var(--dark-primary-color), 0.95);
}

.nav-hamburger-list {
  background: rgba(var(--dark-primary-color), 1);
}

.nav-links .nav-icons-divider {
  color: var(--dark-secondary-color);
}

a:hover .feather-moon {
  fill: white;
  color: white;
}

.social-icons-list .social-icon,
.social-icons-list .social-icon a:visited  {
  fill: var(--dark-text-color);
}

.social-icons-list .social-icon a:hover {
  fill: var(--accent-color);
}

.post-tags .post-tag:hover {
  background-color: var(--dark-text-color);
  color: rgb(var(--dark-primary-color));
}

.tags-list .post-tags .post-tag a .tag-posts-count {
  background-color: var(--dark-secondary-color);
}

.tags-list .post-tags .post-tag:hover a .tag-posts-count {
  background-color: var(--dark-text-color);
  color: rgb(var(--dark-primary-color));
}

.footer {
  border-top-color: var(--dark-header-bg-color);
}

blockquote {
  color: darkgrey;
  border-left-color: var(--dark-secondary-color);
}

hr {
  color: var(--dark-secondary-color);
}

table thead {
  background-color: var(--dark-secondary-color);
}

table td,
table th {
  border-bottom-color: var(--dark-secondary-color);
}

code,
pre {
  background-color: var(--dark-secondary-color) !important;
}

:not(pre) > code {
  background-color: var(--dark-tertiary-color) !important;
  color: var(--dark-text-color);
}

.header-shadow {
  box-shadow: rgb(33, 38, 45) 0px -1px 0px 0px inset;
}

/* TODO: Check if this is needed or not */
/* 
img,
video {
  filter: hue-rotate(180deg) contrast(100%) invert(100%);
  -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
} 
*/

/* admonition in dark mode  */
.admonition {
  padding: 15px;
  margin-bottom: 21px;
  border-left: 10px solid transparent;
}

.admonition .title {
  margin: 0;
  text-transform: uppercase;
  padding-left: 3px;
  border: 2px solid;
  border-style: hidden hidden solid;
}

.admonition .content {
  padding-left: .75em;
  padding-right: .75em;
  padding-top: 0.5em;
  margin-left: 0;
  border-left: 0;
  border-top: 0;
  min-height: 0;
}

.note {
  border-color: #6ab0de;
  background-color: rgba(231,242,250,0.15);
}

.note .title {
  border-color: #6ab0de;
  font-weight: bold;
}

.tip {
  border-color: #1abc9b;
  background-color: rgba(219,250,244,0.15);
}

.tip .title {
  border-color: #1abc9b;
  font-weight: bold;
}