:root {
    --bg-body: #202124;
    --bg-color: #202124;
    --bg-card: #292a2d;
    --bg-secondary: #303134;

    --text-body: #e8eaed;
    --text-heading: #ffffff;
    --text-muted: #9aa0a6;
    --text-light: #bdc1c6;
    --text-link: #e8eaed;
    --text-link-hover: #aecbfa;
    --text-placeholder: #9aa0a6;

    --border-color: #3c4043;
    --border-light: #3c4043;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

    --code-bg: #292a2d;
    --code-text: #e8eaed;
}

body.light-mode {
    --bg-body: url("/assets/img/subtle-dots.png");
    --bg-color: #ffffff;
    --bg-card: #ffffff;
    --bg-secondary: #f1f3f4;

    --text-body: #666666;
    --text-heading: #202124;
    --text-muted: #5f6368;
    --text-light: #70757a;
    --text-link: #1a73e8;
    --text-link-hover: #174ea6;
    --text-placeholder: #5f6368;

    --border-color: #dadce0;
    --border-light: #f1f3f4;

    --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    --shadow-md: 0 4px 6px rgba(32, 33, 36, 0.28);

    --code-bg: #ffffff;
    --code-text: #000000;
}

body {
    font-family: "Roboto Condensed", Arial, sans-serif;
    background: var(--bg-body);
    font-size: 16px;
    line-height: 1.5em;
    color: var(--text-body);
    font-weight: 300;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    color: var(--text-heading);
    margin-bottom: 5px;
}

h1 {
    margin-bottom: 10px;
    font-size: 25px;
}

a {
    text-decoration: none;
    color: var(--text-link);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.mobile-home-icon {
    display: none !important;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid transparent;
}

div#container {
    width: 700px;
    margin: auto;
}

div.right {
    width: 500px;
    float: left;
}

div.right h1 {
    margin-bottom: -2px;
}

div.right ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.right ul li {
    margin-top: 5px;
    margin-left: 0;
    padding: 0;
}

div.right .post ul {
    list-style: square;
    margin-left: 15px;
}

div.content {
    border-top: 1px solid var(--border-color);
    margin-top: 5px;
    padding-top: 5px;
}

div.content pre {
    background: var(--code-bg);
    padding: 10px;
    color: var(--code-text);
    overflow-x: auto;
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 12px;
    border: 1px solid transparent;
}

body.light-mode div.content pre {
    border-color: var(--border-color);
}

div.content .highlight {
    background: var(--code-bg);
}

div.content img {
    max-width: 100%;
}

.disqus-comments {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid var(--border-color);
}

div.content table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    border: 1px solid var(--border-color);
    color: var(--text-body);
}

div.content th,
div.content td {
    padding: 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

div.content th {
    background-color: var(--bg-secondary);
    color: var(--text-heading);
    font-weight: 600;
}

div.content tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

body.light-mode div.content tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

div.col-sm-3 {
    margin-top: 50px;
    font-size: 11px;
    color: var(--text-body);
}

div.col-sm-3 .author-name {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}

div.col-sm-3 .profile-card a:hover {
    text-decoration: none !important;
}

div.col-sm-3 #about {
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--text-body);
    font-weight: 500;
    margin-top: 10px;
}

div.col-sm-3 strong {
    font-size: 16px;
    color: var(--text-heading);
    font-weight: normal;
}

div.col-sm-3 img#about {
    border-radius: 50%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

div.col-sm-9 {
    margin-top: 50px;
}

footer.site-footer {
    border-top: 1px solid var(--border-light);
    width: 100%;
    margin-top: 10px;
    margin-bottom: 3em;
    padding-top: 10px;
    color: var(--text-light);
    font-size: 16px;
    bottom: 0;
    padding-bottom: 10px;
    text-align: center;
}

footer.site-footer div#github {
    text-align: right;
}

.PageNavigation {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0;
}

.PageNavigation a {
    display: inline-block;
    width: auto;
    float: none;
    margin: 0;
    max-width: 48%;
}

.PageNavigation .next {
    text-align: right;
    margin-left: auto;
}

.PageNavigation .prev {
    text-align: left;
    margin-right: auto;
}

span.time,
span.categories {
    color: var(--text-light);
    margin-bottom: 5px;
    font-size: 12px;
}

.social {
    display: block;
    margin-top: 20px;
}

.social ul.social-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.social ul.social-list li {
    display: block;
    margin-bottom: 8px;
}

.social ul.social-list li a {
    font-size: 16px;
    text-decoration: none;
    color: var(--text-body);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

.social ul.social-list li a:hover {
    color: var(--text-link-hover);
}

.social ul.social-list li a i {
    margin-right: 10px;
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.social ul.social-list li a span {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--text-body);
    font-size: 16px;
    font-weight: 400;
    margin-left: 5px;
    line-height: 1;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.posts-grid .post-card:nth-child(odd):hover {
    transform: translateY(-5px) rotate(-1.5deg) scale(1.02);
}

.posts-grid .post-card:nth-child(even):hover {
    transform: translateY(-5px) rotate(1.5deg) scale(1.02);
}

.post-card .post-title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-card-link {
    display: flex;
    flex-direction: column;
    padding: 12px;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
}

.post-title {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-heading);
    flex-grow: 1;
    line-height: 1.3;
}

.post-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.post-categories {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.post-category {
    font-size: 11px;
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 600;
    pointer-events: auto;
    border: 1px solid var(--border-color);
}

.category-buttons {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-buttons--archive {
    margin-bottom: 20px;
}

.category-button {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.btn-default {
    background-color: var(--bg-card);
    color: var(--text-body);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.btn-default:hover {
    background-color: var(--bg-secondary);
    color: var(--text-heading);
    border-color: var(--text-muted);
}

.btn-default.active {
    background-color: var(--text-heading) !important;
    color: var(--bg-color) !important;
    border-color: var(--text-heading) !important;
    pointer-events: none;
}

body.light-mode .btn-default.active {
    color: #ffffff !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.profile-card-home-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.profile-card .author-name,
.profile-card #about {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.profile-card .social {
    position: relative;
    z-index: 3;
}

.profile-card .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
    object-fit: cover;
}

.post-detail-meta {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.post-detail-meta .time {
    font-size: 1.25rem;
    color: var(--text-placeholder);
    font-weight: 500;
}

.post-detail-meta .categories {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.related-posts {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.share-page {
    padding: 10px 10px 5px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.nav-card {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-placeholder);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--text-heading);
    text-decoration: none;
}

.date-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-placeholder);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.date-card i {
    color: var(--text-placeholder);
}

body.light-mode input.search__input {
    background: var(--bg-secondary);
    color: var(--text-body);
    border: 1px solid var(--text-placeholder);
}

body.light-mode input.search__input::placeholder {
    color: var(--text-muted);
}

body.light-mode .search__results {
    background: var(--bg-secondary);
    border: 1px solid var(--text-placeholder);
    box-shadow: var(--shadow-sm);
}

body.light-mode .search__results li a {
    color: var(--text-body);
}

body.light-mode .search__results li a:hover {
    background: var(--border-color);
}

.theme-switch-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
}

.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
    border-radius: 50%;
    z-index: 2;
}

.slider .icon-sun,
.slider .icon-moon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #f1c40f;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.slider .icon-sun {
    left: 8px;
    opacity: 1;
    color: #fbbc04;
}

.slider .icon-moon {
    right: 8px;
    opacity: 0;
    color: #f1c40f;
}

input:checked+.slider {
    background-color: #8ab4f8;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

input:checked+.slider .icon-sun {
    opacity: 0;
}

input:checked+.slider .icon-moon {
    opacity: 1;
}

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 10000;
    pointer-events: none;
}

body.light-mode .reading-progress {
    background: rgba(32, 33, 36, 0.08);
}

.reading-progress__bar {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #8ab4f8 0%, #4dd0e1 100%);
    box-shadow: 0 0 12px rgba(138, 180, 248, 0.45);
}

.post-reading-shell {
    position: relative;
}

@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }

    div.col-sm-3 {
        margin-top: 30px;
    }

    body.page .fixed-condition,
    body.page .col-sm-3,
    .profile-card #about {
        display: none !important;
        margin-top: 0;
    }

    .social ul.social-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .social ul.social-list li {
        margin-bottom: 0;
        display: inline-block;
    }

    .social ul.social-list li a {
        padding: 5px;
        justify-content: center;
        width: auto;
    }

    .social ul.social-list li a span {
        display: none !important;
    }

    .social ul.social-list li a i {
        font-size: 18px !important;
        margin-right: 0 !important;
    }


    body.page .mobile-home-icon {
        display: block !important;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 9999;
        color: var(--text-heading);
        font-family: "Roboto Condensed", Arial, sans-serif;
        font-size: 20px;
        font-weight: normal;
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        line-height: normal;
        text-align: left;
        border-radius: 0;
        box-shadow: none;
        text-decoration: none;
        border: none;
        text-shadow: none;
    }

    body.page .mobile-home-icon:hover,
    body.page .mobile-home-icon:active {
        color: #ddd;
        background: transparent;
    }

    body.light-mode.page .mobile-home-icon:hover,
    body.light-mode.page .mobile-home-icon:active {
        color: var(--text-link-hover);
        background: transparent;
    }
}

@media (min-width: 1024px) {
    .fixed-condition {
        position: fixed;
        max-width: 225px;
    }
}

.preload * {
    transition: none !important;
}

.highlight {
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: 4px;
}

.highlight .hll {
    background-color: #333333
}

.highlight .c {
    color: #608B4E;
    font-style: italic
}

.highlight .err {
    color: #a61717;
    background-color: #e3d2d2
}

.highlight .k {
    color: #569CD6
}

.highlight .o {
    color: #D4D4D4
}

.highlight .cm {
    color: #608B4E;
    font-style: italic
}

.highlight .cp {
    color: #999999;
    font-weight: bold
}

.highlight .c1 {
    color: #608B4E;
    font-style: italic
}

.highlight .cs {
    color: #999999;
    font-weight: bold;
    font-style: italic
}

.highlight .gd {
    color: #000000;
    background-color: #ffdddd
}

.highlight .ge {
    color: #000000;
    font-style: italic
}

.highlight .gr {
    color: #aa0000
}

.highlight .gh {
    color: #999999
}

.highlight .gi {
    color: #000000;
    background-color: #ddffdd
}

.highlight .go {
    color: #888888
}

.highlight .gp {
    color: #555555
}

.highlight .gs {
    font-weight: bold
}

.highlight .gu {
    color: #aaaaaa
}

.highlight .gt {
    color: #aa0000
}

.highlight .kc {
    color: #cc7832;
    font-weight: bold
}

.highlight .kd {
    color: #cc7832;
    font-weight: bold
}

.highlight .kn {
    color: #cc7832;
    font-weight: bold
}

.highlight .kp {
    color: #cc7832;
    font-weight: bold
}

.highlight .kr {
    color: #cc7832;
    font-weight: bold
}

.highlight .kt {
    color: #4EC9B0;
    font-weight: bold
}

.highlight .m {
    color: #6897bb
}

.highlight .s {
    color: #D69D85
}

.highlight .na {
    color: #e8bf6a
}

.highlight .nb {
    color: #0086B3
}

.highlight .nc {
    color: #4EC9B0;
    font-weight: bold
}

.highlight .no {
    color: #9876aa
}

.highlight .nd {
    color: #3c5d5d;
    font-weight: bold
}

.highlight .ni {
    color: #800080
}

.highlight .ne {
    color: #990000;
    font-weight: bold
}

.highlight .nf {
    color: #DCDCAA;
    font-weight: bold
}

.highlight .nl {
    color: #990000;
    font-weight: bold
}

.highlight .nn {
    color: #555555
}

.highlight .nt {
    color: #e8bf6a
}

.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
    color: #9CDCFE
}

.highlight .il {
    color: #6897bb
}

body.light-mode .highlight .k,
body.light-mode .highlight .o,
body.light-mode .highlight .kc,
body.light-mode .highlight .kd,
body.light-mode .highlight .kn,
body.light-mode .highlight .kp,
body.light-mode .highlight .kr,
body.light-mode .highlight .ow {
    color: #0000FF;
    font-weight: normal
}

body.light-mode .highlight .kt,
body.light-mode .highlight .nc {
    color: #2B91AF;
    font-weight: normal
}

body.light-mode .highlight .s,
body.light-mode .highlight .sb,
body.light-mode .highlight .sc,
body.light-mode .highlight .sd,
body.light-mode .highlight .s2,
body.light-mode .highlight .se,
body.light-mode .highlight .sh,
body.light-mode .highlight .si,
body.light-mode .highlight .sx,
body.light-mode .highlight .sr,
body.light-mode .highlight .s1,
body.light-mode .highlight .ss {
    color: #A31515
}

body.light-mode .highlight .m,
body.light-mode .highlight .mf,
body.light-mode .highlight .mh,
body.light-mode .highlight .mi,
body.light-mode .highlight .mo,
body.light-mode .highlight .il {
    color: #000000
}

body.light-mode .highlight .c,
body.light-mode .highlight .cm,
body.light-mode .highlight .c1 {
    color: #008000;
    font-style: italic
}

body.light-mode .highlight .na,
body.light-mode .highlight .nt {
    color: #A31515
}

.highlight .ow {
    color: #569CD6;
    font-weight: bold
}

.highlight .w {
    color: #d4d4d4
}

.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
    color: #B5CEA8
}

.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .s1,
.highlight .ss {
    color: #D69D85
}

.highlight .sr {
    color: #D16969
}

.highlight .bp {
    color: #9CDCFE
}

body.light-mode .highlight .nv,
body.light-mode .highlight .vc,
body.light-mode .highlight .vg,
body.light-mode .highlight .vi {
    color: #1F377F;
}

body.light-mode .highlight .nf {
    color: #74531F;
    font-weight: normal;
}