/* Define variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000;
    --bg-color-lighter: #333;
    --txt-color: #efefef;
    --txt-color-darker: #aaa;
    --highlight-color: #6bf;
    --highlight-color-selected: #6bf;
  }

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

  a:focus, a:active {
    outline: 1px solid var(--highlight-color);
  }

  html a,
  html a:visited,
  html .main-navigation .main-menu>li,
  html .main-navigation ul.main-menu>li>a,
  html .post-navigation .post-title,
  html .entry .entry-meta a:hover,
  html .entry .entry-footer a:hover,
  html .entry .entry-content .more-link:hover,
  html .main-navigation .main-menu>li>a+svg,
  html .comment .comment-metadata>a:hover,
  html .comment .comment-metadata .comment-edit-link:hover,
  html #colophon .site-info a:hover,
  html .widget a,
  html .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
  html .entry .entry-content>.has-primary-color,
  html .entry .entry-content>*[class^="wp-block-"] .has-primary-color,
  html .entry .entry-content>*[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color,
  html .entry .entry-content>*[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color p,
  html li.lastcommented a .comment-author-link {
    color: var(--highlight-color);
  }

  html a:hover,
  html a:active,
  html .main-navigation .main-menu>li>a:hover,
  html .main-navigation .main-menu>li>a:hover+svg,
  html .post-navigation .nav-links a:hover,
  html .post-navigation .nav-links a:hover .post-title,
  html .author-bio .author-description .author-link:hover,
  html .entry .entry-content>.has-secondary-color,
  html .entry .entry-content>*[class^="wp-block-"] .has-secondary-color,
  html .entry .entry-content>*[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color,
  html .entry .entry-content>*[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color p,
  html .comment .comment-author .fn a:hover,
  html .comment-reply-link:hover,
  html .comment-navigation .nav-previous a:hover,
  html .comment-navigation .nav-next a:hover,
  html #cancel-comment-reply-link:hover,
  html .widget a:hover,
  html li.lastcommented a:hover .comment-author-link,
  html .entry .entry-title a:hover {
    color: var(--highlight-color-selected);
  }

  html .entry-content .warning{
    background-color: var(--bg-color-lighter);
    color: var(--txt-color);
    border-color: var(--bg-color-lighter);
  }

  html .entry-content .warning a {
    color: var(--highlight-color);
  }

  html .entry-content .warning a:hover {
    color: var(--highlight-color-selected);
  }

  html .wp-block-image figcaption,
  html .wp-block-video figcaption,
  html .wp-block-gallery figcaption,
  html .wp-block-quote__citation,
  html .wp-block-quote cite,
  html .wp-block-quote footer {
    color: var(--txt-color-darker);
  }

  html .entry-content .promoted-comment p a,
  html .archive .page-header .search-term,
  html .archive .page-header .page-description,
  html .search .page-header .search-term,
  html .search .page-header .page-description,
  html .error404 .page-header .search-term,
  html .error404 .page-header .page-description,
  html .site-title a:link,
  html .site-title a:visited,
  html .social-navigation ul.social-links-menu li a,
  html .comment-form .comment-notes,
  html .comment-form label {
    color: var(--txt-color);
  }

  html .social-navigation ul.social-links-menu li a:hover,
  html .social-navigation ul.social-links-menu li a:active {
    color: var(--txt-color-darker);
  }

  html .quicktags-toolbar input:hover {
    color: var(--txt-color);
  }

  input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"],
  input[type="tel"], input[type="range"], input[type="date"], input[type="month"],
  input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    border: solid 1px var(--bg-color-lighter);
  }

  html .entry .entry-content.excerpt-text a:not(.readmorelink),
  html .entry .entry-content.excerpt-text a:hover:not(.readmorelink) {
    color: var(--highlight-color);
  }

  html ::-moz-selection,
  html ::selection {
    background-color: var(--highlight-color);
  }

  html .entry .entry-content.excerpt-text a:not(.readmorelink),
  html .entry .entry-content.excerpt-text a:hover:not(.readmorelink) {
    color: var(--txt-color);
  }

  /* Dark Mode Table */
  html .entry-content table tr:nth-child(odd),
  html .wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tr:nth-child(odd),
  html .wp-block-table.is-style-stripes tr:nth-child(odd) {
    background: var(--bg-color-lighter);
  }

  html .wp-block-table.is-style-stripes {
    border-bottom: none;
  }

}