/* Define light theme */
:root {
    --bg-color: white;
    --bg-active-color: rgba(0, 0, 0, 0.12);
    --text-color: #404040;
    --link-color: #404040;
    --link-hover-color: #5C8374;
    --blockquote-color: gray;
    --hr-color: white;
    --post-container-link-color: #5C8374;
    --post-container-link-hover-color: #93B1A6;
    --post-container-head-color: gray;
    --post-meta-color: #a3a3a3;
    --nav-border-color: #f2f2f2;
    --tag-color: white;
    --tag-bg-hover-color: #a5a5a5;
    --siderbar-text-color: #948686;
    --catalog-active-bg-color: #F5F5F5;
    --catalog-active-link-color: #5C8374;
    --section-title-line: #1D3557;
    --underline-bg-color: #93B1A6;
    --portcard-info-h2-color: #5C8374;
    --webcard-bg-color: #e3e3e3;
}

/* Override variables for dark theme */
[data-theme='dark'] {
    --bg-color: #121212;
    --bg-active-color: rgba(255, 255, 255, 0.733);
    --text-color: #DDE6ED;
    --link-color: #DDE6ED;
    /* --link-hover-color: #5C8374; */
    --link-hover-color: #93B1A6;
    --blockquote-color: gray;
    --hr-color: #183D3D;
    --post-container-link-color: #5C8374;
    --post-container-link-hover-color: #93B1A6;
    --post-container-head-color: gray;
    --post-meta-color: #a4a4a4;
    --nav-border-color: #eee;
    --tag-color: white;
    --tag-bg-hover-color: #183D3D;
    --siderbar-text-color: #c8d1d7;
    --catalog-active-bg-color: #183D3D;
    --catalog-active-link-color: #93B1A6;
    --section-title-line: #DDE6ED;
    --underline-bg-color: #5C8374;
    --portcard-info-h2-color: #5C8374;
    --webcard-bg-color: gray;
}


body {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    background-color: var(--bg-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-hover-color);
}

blockquote {
    color: var(--blockquote-color);
}

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

.post-container a {
    color: var(--post-container-link-color);
}

.post-container h5 {
    color: var(--post-container-head-color);
}

.post-container h6 {
    color: var(--post-container-head-color);
}

.navbar-default .navbar-collapse {
    /* background: var(--bg-color); */
    background: none;
}

@media only screen and (max-width: 767px) {
    .navbar-default .navbar-collapse {
        background: var(--bg-color);
    }
}

.navbar-custom .nav li a:active {
    background: var(--bg-active-color);
}

.navbar-custom.invert .navbar-toggle:active {
    background: var(--bg-active-color);
}

.navbar-custom.invert .navbar-toggle .icon-bar {
    background-color: var(--text-color);
}

.navbar-custom.invert .navbar-brand {
    color: var(--link-color);
}

.navbar-custom.invert .navbar-brand:hover,
.navbar-custom.invert .navbar-brand:focus {
    color: var(--link-color);
}

.navbar-custom.invert .nav li a {
    color: var(--link-color);
}

.navbar-custom.invert .nav li a:hover,
.navbar-custom.invert .nav li a:focus {
    color: var(--link-hover-color);
}

.navbar-custom.is-fixed {
    background: var(--bg-color);
    border-bottom: 1px solid var(--nav-border-color);
}

.navbar-custom.is-fixed .navbar-brand {
    color: var(--link-color);
}

.navbar-custom.is-fixed .navbar-brand:hover,
.navbar-custom.is-fixed .navbar-brand:focus {
    color: var(--link-hover-color);
}

.navbar-custom.is-fixed .nav li a {
    color: var(--link-color);
}

.navbar-custom.is-fixed .nav li a:hover,
.navbar-custom.is-fixed .nav li a:focus {
    color: var(--link-hover-color);
}

.intro-header.style-text .site-heading,
.intro-header.style-text .post-heading,
.intro-header.style-text .page-heading {
    color: var(--text-color);
}

.intro-header.style-text .tags a,
.intro-header.style-text .tags .tag {
    border-color: var(--text-color);
    color: var(--text-color);
}

.post-preview>a {
    color: var(--link-color);
}

.post-preview>a:hover,
.post-preview>a:focus {
    color: var(--link-hover-color);
}

.post-preview>.post-meta {
    color: var(--post-meta-color);
}

.post-preview>.post-meta>a {
    color: var(--link-color);
}

.post-preview>.post-meta>a:hover,
.post-preview>.post-meta>a:focus {
    color: var(--link-hover-color);
}

.post-content-preview {
    color: var(--link-color);
}

.post-content-preview:hover {
    color: var(--link-hover-color);
}

footer .copyright a {
    color: var(--post-container-link-color);
}

footer .copyright a:hover,
footer .copyright a:focus {
    color: var(--post-container-link-hover-color);
}

footer a {
    color: var(--post-container-link-color);
}

footer a:hover,
footer a:focus {
    color: var(--post-container-link-hover-color);
}

.tags a,
.tags .tag {
    color: var(--tag-color);
    border: 1px solid var(--tag-color);
}

.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
    color: var(--tag-color);
    border-color: var(--tag-color);
    background-color: var(--tag-bg-hover-color);
}

#tag_cloud a:hover,
#tag_cloud .tag:hover,
#tag_cloud a:active,
#tag_cloud .tag:active,
#tag_cloud a.focus,
#tag_cloud .tag.focus {
    background-color: var(--tag-bg-hover-color);
}

.sidebar-container {
    color: var(--siderbar-text-color);
}

.sidebar-container h5 {
    color: var(--siderbar-text-color);
}

.sidebar-container h5 a {
    color: var(--siderbar-text-color);
}

.sidebar-container a {
    color: var(--siderbar-text-color);
}

.sidebar-container a:hover,
.sidebar-container a:active {
    color: var(--link-hover-color);
}

.sidebar-container .tags a {
    border-color: var(--siderbar-text-color);
}

.sidebar-container .tags a:hover,
.sidebar-container .tags a:active {
    color: var(--tag-color);
}

.side-catalog .catalog-body .active {
    background-color: var(--catalog-active-bg-color);
}

.side-catalog .catalog-body .active a {
    color: var(--catalog-active-link-color);
}

section .title .line {
    background-color: var(--section-title-line);
}


.underline--magical {
    background-image: linear-gradient(120deg, var(--underline-bg-color) 0%, var(--underline-bg-color) 100%);
}

.portcard .info h2 {
    color: var(--portcard-info-h2-color);
}

.webcontent {
    background: var(--bg-color);
}

.webcard {
    background: var(--webcard-bg-color);
    border-color: var(--webcard-bg-color);
}

.pager li>a,
.pager li>span {
    background-color: var(--bg-color);
}

.pager li>a {
    color: var(--link-color);
}

.pager li>a:hover,
.pager li>a:focus {
    color: var(--link-color);
    background-color: var(--tag-bg-hover-color);
    border: 1px solid var(--link-color);
}

.pager li>a:hover>span,
.pager li>a:focus>span {
    color: var(--link-color);
}

#loading-screen {
    background-color: var(--bg-color);
}

/* .archive a   {
    color: var(--link-color);
} */

.liveSiteButton {
    border-color: var(--webcard-bg-color);
    /* background: var(--webcard-bg-color); */
}

.liveSiteButton:hover {
    background: var(--webcard-bg-color);
    border-color: var(--webcard-bg-color);
}