:root {
    --article-background-color: #c7bfdd;
    --page-background-color: #9e8fc3;
    --nav-background-color: #3a2f55;
    --accent-color: #427651;

    --link-color-bright: #A5CDB1;
    --link-color-article: #427651;
    --link-color-side: var(--link-color-article);

    --white: #f1eff6;
    --black: #000;

    --sidebar-background-color: var(--link-color-bright);
    /* --sidebar-background-color: var(--link-color-bright); */
    --sidebar-border-color: var(--nav-background-color);


    --subtitle-text-color: var(--accent-color);
    --subtitle-stroke-offset: 2px;
    --subtitle-stroke-color: var(--link-color-bright);
    --subtitle-glow-size: 35px;
    --subtitle-glow-color: var(--black);

    --comment-border-color: var(--nav-background-color);
    --comment-background-color: var(--page-background-color);
}

body {
    background: url(https://board.goeshard.org/static/images/background.webp);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-attachment: fixed;
    background-color: var(--page-background-color);
}

@media (max-width: 768px) {
    body {
        background-size: 100% 100vh;  /* fill the viewport vertically */
        background-repeat: no-repeat; /* remove vertical repetition */
        background-position: top;     /* align to top */
    }
}

.content-sidebar-container {
    gap: 0;
}

article {
    background-color: var(--article-background-color);
    margin: 1em 0em;
    padding: 1em 0.5em;
    border: 3px solid var(--nav-background-color);
}

.post-content {
    border: 3px solid var(--nav-background-color);
}
.post-content a {
    color: var(--link-color-article);
}

.post-list-item .item-thumb {
    margin-left: 10px;
}
.post-list-item:not(:has(.item-thumb)) > .item-main-group {
    margin-left: 10px;
}

.post-list-item .item-description {
    color: var(--black);
}

.post-list-item:hover {
    transform: scale(1.1);
    width: 95%;
    border: 3px solid var(--accent-color);

    background-color: var(--link-color-bright);
    cursor: pointer;
}

.sidebar {
    border: 3px solid var(--sidebar-border-color);
    background-color: var(--sidebar-background-color);
    margin-left: -0.1em;
    padding-right: 0.8em;
}

.sidebar a {
    color: var(--accent-color);
}

.column-links a {
    color: var(--link-color-bright);
    background-color: var(--nav-background-color);
    padding: 0.4em 0.8em;
}

.column-links a:hover {
    color: var(--white);
}

.item-title-author-group .item-author-avatar {
    border: 2px solid var(--accent-color);
}

.post-content > *:not(pre) {
    padding: 0 1.5em;
}

.post-content ul, .post-content ol {
    padding: 0 4.0em;
}

.subtitle-group h2,
.subtitle-group h1 {
    color: var(--subtitle-text-color);
    letter-spacing: 0.12em;
    text-shadow:
    /* stroke */
        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),
    /* glow */
        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);
}

.comments-container {
    border: 6px dashed var(--comment-border-color);
    padding: 0.1em 1em;
    background-color: var(--comment-background-color);
}

.webrings {
    background: var(--page-background-color);
    border: 2px solid var(--nav-background-color);
}

.webrings a:hover {
    background: var(--link-color-bright);
    transform: translateY(-2px);
}

footer .copyright-text {
    background-color: var(--page-background-color);
    padding: 0.3em 0.3em;
}