/* ==UserStyle==
@name           dev.to-dark-theme
@namespace      https://github.com/mercxry/dev.to-dark-theme
@version        1.0.0
@description    Simple Dark Theme for dev.to
@author         mercxry
@homepageURL    https://dev.to/mercxry/dark-theme-for-devto-14e9
@supportURL     https://github.com/mercxry/dev.to-dark-theme
@updateURL      https://raw.githubusercontent.com/mercxry/dev.to-dark-theme/master/theme.user.css
==/UserStyle== */

@-moz-document domain("dev.to") {
    body {
        background: var(--theme-background, #191919);
    }

    .top-bar {
        background: var(--theme-top-bar-background, #222222);
    }

    .nav-search-form__input {
        background: var(--theme-top-bar-search-background, #353535);
    }

    .top-bar nav .connect-icon {
        fill: var(--theme-top-bar-color, #969696);
    }

    .top-bar nav .notifications-icon {
        fill: var(--theme-top-bar-color, #969696);
    }

    .home .side-bar .widget {
        background: var(--theme-container-background, #222222);
        border: var(--theme-container-border, 1px solid #181818);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
    }

    .home .side-bar .widget header a {
        color: #fff;
    }

    .home .side-bar .widget .cta-button {
        background: #222;
    }

    .home .side-bar .widget-link-list__item a {
        color: #c3c3c3;
    }

    .home .articles-list a {
        color: #fff;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-profile-snapshot
        .sidebar-profile-snapshot-inner {
        color: #ccc;
    }

    .home .side-bar .sidebar-nav .sidebar-profile-snapshot {
        background: var(--theme-container-background, #222);
        border: var(--theme-container-border, 1px solid #181818);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-profile-snapshot
        .sidebar-profile-pic {
        background: #181818;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element
        a.sidebar-nav-link {
        color: #ccc;
    }

    .home .side-bar .widget {
        color: #fff;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element.sidebar-nav-readinglist:hover {
        background: #222;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element.sidebar-nav-readinglist
        .sidebar-nav-link:hover {
        background: #222;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element.sidebar-nav-readinglist
        .readinglist-sidebar-subcat
        a:hover {
        background: #333;
        color: #ccc;
    }

    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-element:hover {
        background: #111;
    }

    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-subheader {
        background: #222;
    }

    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-subheader a {
        color: #fff;
    }

    .home .side-bar .widget .widget-body .sidebar-sponsor .sponsor-tagline {
        color: #ccc;
    }

    .home .side-bar .widget .widget-body .sponsors-love-message {
        border-top: 2px solid #111;
        color: #ccc;
    }

    .home .articles-list .on-page-nav-controls .nav-chronofiter-link.selected {
        background: #cfd7ff;
        border: 1px solid #4e57ef;
        box-shadow: 3px 4px 0px #4e57ef;
        color: #222;
    }

    .home .side-bar .widget .widget-body .sponsor-footer a {
        background: #222;
        color: #fff;
    }

    .home .side-bar .side-footer a {
        color: #ccc;
    }

    .home .side-bar .widget .widget-body .widget-podcast-ep a {
        color: #ccc;
    }

    .home .articles-list .single-article {
        background: var(--theme-container-background, #222);
        border: var(--theme-container-border, 1px solid #181818);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
    }

    .home .articles-list .single-article.big-article .content-wrapper {
        background: var(--theme-container-background, #222);
        border-top: var(--theme-container-border, 1px solid #222);
        border-bottom: var(--theme-container-border, 1px solid #222);
    }

    .home .articles-list .single-article.big-article .content-wrapper {
        color: #ccc;
    }

    .home .articles-list .featured-tags .tag {
        color: #ccc;
    }

    .home .articles-list a {
        color: #ccc;
    }

    /* Post */
    .stories-show {
        background: var(--theme-background, #222);
    }

    body {
        color: var(--theme-color, #ccc);
    }

    .container .title h1.medium {
        font-size: 47px;
        color: #fff;
    }

    .container {
        border: 1px solid #181818;
        background: var(--theme-container-background, #181818);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #181818);
    }

    .container .body {
        background: var(--theme-container-background, #181818);
    }

    .container .article-actions button:not(.user-activated),
    .container .article-actions a:not(.user-activated) {
        background: #181818 !important;
    }

    .container .article-actions button .reaction-number {
        color: #ccc;
    }

    .container .article-actions .article-actions-comments-count {
        color: #ccc;
    }

    .primary-sticky-nav .primary-sticky-nav-element {
        background: var(--theme-container-background, #181818);
        color: #ccc;
    }

    .primary-sticky-nav
        .primary-sticky-nav-author
        .primary-sticky-nav-author-summary {
        color: #ccc;
    }

    .primary-sticky-nav .primary-sticky-nav-author a {
        color: #fff;
    }

    .primary-sticky-nav .user-metadata-details .key {
        color: #fff;
    }

    .primary-sticky-nav .primary-sticky-nav-element:hover {
        color: #ccc;
    }

    .primary-sticky-nav .primary-sticky-nav-title a {
        color: #fff;
    }

    .container .about-the-author {
        background: #181818;
    }

    .container .about-the-author a {
        color: #fff;
    }

    .container .about-the-author .main-content .social a {
        color: #fff;
    }

    .comments-container form {
        border: 1px solid #181818;
        background: #181818;
    }

    .comments-container .editor-image-upload .image-upload-button {
        background: #181818;
    }

    .single-comment-node .inner-comment {
        border: 1px solid #222;
        background: #181818;
    }

    .single-comment-node .details a {
        color: #fff;
    }

    .single-comment-node .body {
        color: #ccc;
    }

    .single-comment-node .details .comment-date a {
        color: #ccc;
    }

    .reactions-count {
        background: #181818;
        border: 1px solid #222;
        color: #ccc;
    }

    .single-comment-node .reaction-button.reacted .reactions-count,
    .single-comment-node .dropbtn.reacted .reactions-count {
        color: #ccc;
    }

    .show-page-content-display
        .content-classification
        .content-classification-text {
        background: #181818;
        color: #ccc;
    }

    .show-page-content-display a {
        color: #fff;
    }

    .more-articles a {
        color: #fff;
    }

    .more-articles .single-other-article:hover {
        background: #181818;
    }

    footer .container .inner-footer-container {
        background: #181818;
        border: 1px solid #181818;
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #181818);
    }

    footer .container a {
        color: #ccc;
    }

    .comments-container form textarea {
        border: 1px solid #222;
        background-color: #181818;
        color: #fff;
    }

    .user-profile-header {
        background: #222;
    }

    .sidebar-additional
        .widget
        .widget-suggested-follows-container
        .widget-body
        .widget-list-item__suggestions
        .widget-list-item__content
        a {
        color: #fff;
    }

    .sidebar-data {
        color: #ccc;
    }

    .home .articles-list .single-article .search-snippet span {
        background: #222;
    }

    .home .articles-list .single-article .search-snippet {
        color: #ccc;
    }

    .home .articles-list .single-article .content h3 {
        color: #fff;
    }

    .home .side-bar .widget .query-filter-button {
        color: #ccc;
    }

    .home .side-bar .widget .query-filter-button:hover {
        background: #181818;
    }

    .home .articles-list .single-article h4 a {
        color: #fff;
    }

    .home .articles-list .article-reading-time {
        color: #ccc;
    }

    input[type="text"] {
        color: #ccc;
    }

    .home .side-bar .widget .social-icon {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .ltag-github-readme-tag {
        border: 1px solid #222;
    }

    .gh-btn {
        background-color: #222;
    }

    .dropdown-icon {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .home .articles-list .article-engagement-count a {
        color: #ccc;
    }

    .home .side-bar .widget-link-list__item .discuss-list-comment-count {
        color: #ccc;
    }

    #page-content.users-edit .user-settings-page form input,
    #page-content.users-update .user-settings-page form input,
    #page-content.organizations-create .user-settings-page form input,
    #page-content.organizations-update .user-settings-page form input {
        border: 1px solid #222;
        background-color: #181818;
    }

    #page-content.users-edit .user-settings-page form textarea,
    #page-content.users-update .user-settings-page form textarea,
    #page-content.organizations-create .user-settings-page form textarea,
    #page-content.organizations-update .user-settings-page form textarea {
        border: 1px solid #222;
        background-color: #181818;
    }

    #page-content.users-edit .user-settings-page form input[type="submit"],
    #page-content.users-update .user-settings-page form input[type="submit"],
    #page-content.organizations-create
        .user-settings-page
        form
        input[type="submit"],
    #page-content.organizations-update
        .user-settings-page
        form
        input[type="submit"] {
        color: #fff;
    }

    #page-content.users-edit
        .user-settings-page
        .settings-hub
        .single-settings-tab,
    #page-content.users-update
        .user-settings-page
        .settings-hub
        .single-settings-tab,
    #page-content.organizations-create
        .user-settings-page
        .settings-hub
        .single-settings-tab,
    #page-content.organizations-update
        .user-settings-page
        .settings-hub
        .single-settings-tab {
        color: #ccc;
    }

    #page-content.users-edit
        .user-settings-page
        .settings-hub
        .single-settings-tab.selected,
    #page-content.users-update
        .user-settings-page
        .settings-hub
        .single-settings-tab.selected,
    #page-content.organizations-create
        .user-settings-page
        .settings-hub
        .single-settings-tab.selected,
    #page-content.organizations-update
        .user-settings-page
        .settings-hub
        .single-settings-tab.selected {
        background: #111;
    }

    .github-repos {
        background: #181818;
    }

    .github-repos .github-repo-row {
        background: #181818;
    }

    .github-repos .github-repo-row .github-repo-row-name button {
        background: #111;
        color: #fff;
    }

    .github-repos .github-repo-row .github-repo-row-name button:hover,
    .github-repos .github-repo-row .github-repo-row-name button:focus {
        background: #121212;
    }

    #page-content.users-edit .credit-card-button,
    #page-content.users-update .credit-card-button,
    #page-content.organizations-create .credit-card-button,
    #page-content.organizations-update .credit-card-button {
        background: #181818;
        color: white;
        border: 1px solid #111;
        box-shadow: inset 0 -5px 5px #181818;
    }

    .cta {
        color: #ddd;
        background: #111;
    }

    .top-bar nav .write {
        border: 2px solid var(--theme-top-bar-write-color, #0a0a0a);
        color: var(--theme-top-bar-write-color, #ccc);
        background: var(--theme-top-bar-write-background, #181818);
    }

    .index-comments {
        background: #222;
        border: var(--theme-container-border, 1px solid #111);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
    }

    .user-profile-header
        .user-profile-header-container
        .profile-details
        p.profile-description,
    .user-profile-header
        .tag-or-query-header-container
        .profile-details
        p.profile-description {
        color: #ccc;
    }

    .home .articles-list .article-engagement-count.bookmark-engage {
        background: #001eb0;
    }

    .home .articles-list .featured-user-name a {
        color: #afaba5;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element.sidebar-nav-readinglist
        .readinglist-sidebar-subcat
        a {
        color: #aba7a1;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-profile-snapshot
        .sidebar-profile-content
        .sidebar-profile-username {
        color: #aba7a1;
    }

    .home .side-bar .widget .cta-button {
        color: #4e7db4;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element.sidebar-nav-readinglist
        .readinglist-sidebar-subcat
        .separator {
        border-left: 2px solid #343434;
    }

    .home .articles-list .on-page-nav-controls .separator {
        border-left: 2px solid #343434;
    }

    .home
        .side-bar
        .widget
        .widget-body
        .sidebar-sponsor
        .sponsor-tagline
        .sponsor-learn-more {
        color: #2a6ebd;
    }

    .user-profile-header .user-metadata-details .user-metadata-details-inner {
        border-left: 3px solid #343434;
    }

    .home .articles-list .on-page-nav-controls .nav-chronofiter-link.selected {
        background: #181818;
        border: 1px solid #111;
        box-shadow: 3px 4px 0px #111;
        color: #fff;
    }

    .home
        .side-bar
        .sidebar-nav
        .sidebar-nav-block
        .sidebar-nav-element
        a.sidebar-nav-link-follow {
        color: #ccc;
    }

    .icon-img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .container .title h3 {
        color: #afaba5;
    }

    .container .title h3 a {
        color: #afaba5;
    }

    .primary-sticky-nav
        .primary-sticky-nav-element
        .primary-sticky-nav-element-details {
        color: #afaba5;
    }

    .show-page-content-display .main-content-display .content-author a {
        color: #afaba5;
    }

    .show-page-content-display .main-content-display .engagement-count {
        color: #afaba5;
    }

    .more-articles .single-other-article h4 {
        color: #afaba5;
    }

    .home .side-bar .widget.signin-cta-widget {
        background: #222;
        border: 1px solid #111;
        box-shadow: 5px 6px 0px #111;
    }

    .home .side-bar .widget .cta-button.login-cta-button {
        color: #ccc;
        background: #222;
    }

    .feed-cta {
        background: #222 !important;
        border: 1px solid #111 !important;
        box-shadow: 5px 6px 0px #111 !important;
    }

    .feed-cta .cta-button {
        border: 2px solid #111;
        background-color: #181818;
    }

    .top-bar nav .menu {
        background: #181818;
        border: 1px solid #111;
    }

    .top-bar nav .menu a {
        color: #ccc;
    }

    .top-bar nav .menu .header {
        border-bottom: 3px solid #222;
        color: #fff;
    }

    .top-bar nav .menu .option:hover {
        background: #222;
    }

    .notifications-index {
        background: var(--theme-background, #181818);
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .content
        .notification-new-post {
        color: #fff;
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .content
        .notification-new-post
        .notification-new-post-tags {
        color: #afaba5;
    }

    .chat__channeltypefilterbutton--active {
        background: #222;
    }

    .chat__channeltypefilterbutton {
        border-bottom: 1px solid #222;
    }

    .chatchannels__configmenu {
        background: #111;
        border-top: 1px solid #111;
    }

    .chatchannels__configmenu a {
        color: #ccc;
    }

    .dashboard-container .no-articles {
        background: #111;
    }

    .chatchannels__config {
        background: var(--theme-background, #111);
        border-top: 1px solid #111;
    }

    .activechatchannel__header {
        border-bottom: 1px solid #111;
        background: #222;
    }

    .activechatchannel {
        border: var(--theme-container-border, 1px solid #111);
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #222);
    }

    .activechatchannel__form {
        border-top: var(--theme-container-border, 1px solid #111);
        background: #222;
    }

    .messagecomposer__input {
        border: 1px solid #111;
        background-color: #181818;
        color: #ccc;
    }

    .activechatchannel__messages {
        background-color: #222;
        color: #ccc;
    }

    .messagecomposer__submit {
        background: #111;
        color: #ccc;
        border-color: #181818;
    }

    .chat__channels input {
        border: 1px solid #111;
        background-color: #222;
        color: #ccc;
    }

    .chatchannels__channelslistheader {
        background: #222;
        border: 1px solid #111;
        color: #ccc;
    }

    .chat__channeltypefilterbutton {
        border-bottom: 1px solid #222;
        color: #ccc;
    }

    .chatchannels__config img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .dashboard-container .actions .action.active {
        background: #111;
    }

    .dashboard-container .actions .action {
        color: #ccc;
    }

    .dashboard-container .actions .action:not(.active):hover {
        background: #222;
    }

    .dashboard-container .no-articles img {
        display: none;
    }

    .markdown-editor .textarea-header {
        background: #222;
        border: 1px solid #111;
    }

    .markdown-editor textarea {
        background-color: #222;
        border-color: #111;
        color: #ccc;
    }

    .home
        .side-bar
        .widget
        .query-filter-button.query-type-filter-button.selected {
        background: #111;
    }

    .home
        .side-bar
        .widget
        .query-filter-button.query-type-filter-button:hover {
        background: #181818;
    }

    .home
        .articles-list
        .single-article
        .article-organization-headline
        .article-organization-headline-inner {
        background: #181818;
        color: #ccc;
    }

    .comments {
        background: var(--theme-background, #222);
    }

    .comments-container .top-level-actions a {
        background: #111;
        color: #ccc;
    }

    .single-comment-node .details .dropdown .dropdown-content a {
        color: #ccc;
        background-color: #222;
    }

    .single-comment-node .details .dropdown .dropdown-content {
        border: 1px solid #111;
        background: #111;
    }

    .single-comment-node .details .dropdown .dropdown-content a:hover {
        background-color: #181818;
    }

    .comments-container .comment-view-parent {
        background: #111;
    }

    .single-comment-node .reaction-button.reaction-button,
    .single-comment-node .dropbtn.reaction-button {
        background: #181818 !important;
    }

    .social-links {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .comments-container form .comment-preview-div {
        background: #111;
        border: 2px solid #222;
    }

    .github-thread {
        background-color: #222;
        border: 1px solid #111;
        box-shadow: 1px 2px 4px 0 #111;
    }

    .github-thread .timeline-comment-header {
        background: #222;
        border-bottom: 1px solid #111;
    }

    .github-thread .arrow-left-outer {
        border-right-color: #222;
    }

    .github-thread .arrow-left-inner {
        border-right-color: #222;
    }

    .gh-btn-container {
        box-shadow: -0px -0px 60px 42px #222;
    }

    .ltag_github-liquid-tag h1 .issue-title {
        color: #fff;
    }

    img.github-logo {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .github-thread .timeline-comment-header-text a {
        color: #fff;
    }

    .single-comment-node .reaction-button .reactions-count,
    .single-comment-node .dropbtn .reactions-count {
        background: #111;
        border: 1px solid #222;
    }

    .comments-container img.icon-image {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .comments-container form textarea.preview-loading {
        background: #111
            url("https://practicaldev-herokuapp-com.freetls.fastly.net/assets/loading-ellipsis-0339306544150384d710ea2b5f0a78be68b6389fe728a7ded105fa8a53067ac5.svg")
            no-repeat center center;
    }

    .single-comment-node .reaction-button img,
    .single-comment-node .dropbtn img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .single-comment-node .reaction-button.reacted .voted-heart,
    .single-comment-node .dropbtn.reacted .voted-heart {
        -webkit-filter: invert(0);
        filter: invert(0);
    }

    .dashboard-container .single-article a {
        color: #ccc;
    }

    .dashboard-container .single-article {
        border: 1px solid #111;
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
        background: #222;
    }

    .dashboard-container .dashboard-analytics-header-wrapper {
        background: #222;
        box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #111);
    }

    .dashboard-container .single-article h2 form {
        background: #111;
    }

    .dashboard-container .single-article h2 form input {
        border: 1px solid #222;
        background-color: #222;
    }

    .container
        .article-actions
        .article-share-action-block
        .dropdown-content.showing {
        background-color: #181818;
        border-color: #111;
    }

    .container
        .article-actions
        .article-share-action-block
        .dropdown-content
        .dropdown-link-row
        input {
        border: 2px solid #111;
        background-color: #222;
        color: #fff;
    }

    .container
        .article-actions
        .article-share-action-block
        .dropdown-content
        .dropdown-link-row
        a {
        color: #ccc;
    }

    .notifications-index .home .articles-list .unseen {
        background-color: #111;
    }

    .notifications-index .home .articles-list .single-article .comment-text {
        border: 1px solid #222;
        color: #ccc;
    }

    .notifications-index .home .articles-list .single-article .comment-text p {
        color: #ccc;
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .comment-text:hover {
        border: 1px solid #0a0a0a;
        background: #111;
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .content
        .notification-comment-reacted-link {
        border: 1px solid #111;
        color: #fff !important;
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .content
        .notification-comment-reacted-link:hover {
        background: #181818;
        border: 1px solid #111;
    }

    .notifications-index
        .home
        .articles-list
        .single-article
        .comment-actions
        img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    /* bottom bar for mobile */

    @media screen and (min-width: 880px) {
        .container .article-actions {
            background: var(--theme-top-bar-background, #222222);
        }
    }

    .container .article-actions {
        background: var(--theme-background, #222222);
        background: #222222;
    }
}