:root {
    --hue: 200;
    --bright: 6;
    --darkest-bright: calc(var(--bright) * 1%);
    --darker-bright: calc((var(--bright) + 2) * 1%);
    --dark-bright: calc((var(--bright) + 4) * 1%);
    --very-dark-bright: calc((var(--bright) - 5) * 1%);
    --fg-color: hsl(var(--hue),100%,89%);
    --bg-color: hsl(var(--hue),84%,var(--darkest-bright));

    --bg-head-color: hsl(var(--hue),84%,var(--darker-bright));
    --bg-color-half-opacity: hsla(var(--hue), 84%, var(--darker-bright), 0.5);
    --faint-color: hsl(var(--hue),64%,64%);
    --fainter-color: hsl(var(--hue),44%,44%);
    --link-br: 73%;
    --hover: 22%;

    --link-t: var(--hue), 100%, var(--link-br);
    --hi-t: var(--hue), 100%, calc(var(--link-br) + var(--hover));
    --link-c: hsl(var(--link-t));
    --ul-c: hsla(var(--link-t), 30%);
    --hi-c: hsl(var(--hi-t));
    --ul-hi-c: hsla(var(--hi-t), 60%);
    --glow-c: hsla(var(--link-t), 50%);

    --complement-color: hsl(calc(var(--hue) + 180), 50%, 65%);


    --surface-1: hsl(var(--hue), 40%, 14%);
    --surface-2: hsl(var(--hue), 36%, 18%);
    --surface-3: hsl(var(--hue), 32%, 22%);


    --border-soft: hsl(var(--hue), 30%, 26%);
    --border-strong: hsl(var(--hue), 60%, 45%);


    --text-primary: var(--fg-color);
    --text-secondary: hsl(var(--hue), 50%, 70%);
    --text-muted: hsl(var(--hue), 35%, 62%);
    --text-faint: hsl(var(--hue), 25%, 52%);


    --glow-soft: 0 0 8px var(--glow-c);

    --subtitle-text-color: var(--faint-color);
    --subtitle-stroke-offset: 2px;
    --subtitle-stroke-color: #000;
    --subtitle-glow-size: 35px;
    --subtitle-glow-color: var(--glow-c);
}






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

a {
    color: var(--link-c);
    transition: 0.2s ease;
}
a:hover {
    color: var(--hi-c);
    text-shadow: var(--glow-soft);
}





.post-list-item {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    transition: 0.25s ease;
}

.post-list-item:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.post-list-item .item-thumb {
    background: var(--surface-2);
    border: 2px solid var(--border-soft);
    transition: 0.25s ease;
}

.post-list-item .item-thumb:hover {
    transform: scale(1.03);
    border-color: var(--link-c);
    box-shadow: var(--glow-soft);
}


.item-main-top-group .item-title {
    color: var(--complement-color);
    font-weight: 600;
}


.item-main-extra-group .item-date {
    color: var(--text-muted);
    opacity: 1;
}

.item-main-top-group .item-column {
    color: var(--complement-color);
}


.post-list-item .item-main-bottom-group {
    color: var(--text-secondary);
    margin-top: 0.4rem;
    line-height: 1.5;
}


.item-author-avatar {
    border: 2px solid var(--border-strong);
    box-shadow: 0 0 6px var(--glow-c);
}





.sidebar {
    background: var(--surface-1);
    border: 2px solid var(--border-soft);
    padding: 1rem;
}

@media (max-width: 800px) {
    .sidebar {
        border: none;
        border-top: 2px solid var(--border-soft);
    }
}

.sidebar h3,
.sidebar h4,
.sidebar h5 {
    color: var(--hi-c);
}

.sidebar small {
    color: var(--text-muted);
}


.author-info {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    padding: 0.75rem;
    border-radius: 6px;
}

.author-info-description {
    color: var(--text-secondary);
}

.author-info-avatar {
    background: var(--surface-3);
    box-shadow: 0 0 10px var(--glow-c);
}





.year-calendar td {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    transition: 0.2s ease;
}

.year-calendar td:hover {
    background: var(--surface-2);
    border-color: var(--link-c);
}

.year-calendar .month-name {
    color: var(--hi-c);
    font-weight: 700;
}

.year-calendar .month-count {
    color: var(--text-muted);
}

.year-calendar .mute {
    color: var(--text-faint);
}





.comments-container {
    border-top: 2px solid var(--border-strong);
    margin-top: 2rem;
    padding-top: 1.5rem;
}





pre {
    background: var(--surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-soft);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
}





footer {
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    margin-top: 3rem;
    padding-top: 1rem;
}

header > * {
    color: var(--faint-color);
}



.subtitle-group h2,
.subtitle-group h1 {
    color: var(--subtitle-text-color);
    letter-spacing: 0.12em;
    text-shadow:

        var(--subtitle-stroke-offset) 0 var(--subtitle-stroke-color),
        calc(var(--subtitle-stroke-offset) * -1) 0 var(--subtitle-stroke-color),
        0 var(--subtitle-stroke-offset) var(--subtitle-stroke-color),
        0 calc(var(--subtitle-stroke-offset) * -1) var(--subtitle-stroke-color),
        calc(var(--subtitle-stroke-offset) * 0.7) calc(var(--subtitle-stroke-offset) * 0.7) var(--subtitle-stroke-color),
        calc(var(--subtitle-stroke-offset) * -0.7) calc(var(--subtitle-stroke-offset) * 0.7) var(--subtitle-stroke-color),
        calc(var(--subtitle-stroke-offset) * 0.7) calc(var(--subtitle-stroke-offset) * -0.7) var(--subtitle-stroke-color),
        calc(var(--subtitle-stroke-offset) * -0.7) calc(var(--subtitle-stroke-offset) * -0.7) var(--subtitle-stroke-color),

        0 0 calc(var(--subtitle-glow-size) * 0.3) var(--subtitle-glow-color),
        0 0 calc(var(--subtitle-glow-size) * 0.6) var(--subtitle-glow-color),
        0 0 calc(var(--subtitle-glow-size) * 1)   var(--subtitle-glow-color);
}

.post-content h2,.post-content h3, .post-content h4 {
    color: var(--faint-color);
}