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

    --link-color-bright: #A5CDB1;
    --link-color-dark: #2b382f;
    --link-color-bright-blue: #a5a6cd;

    --link-color-article: #496edb;
    --white: #f1eff6;
    --black: #000;

    --sidebar-background-color: var(--link-color-bright-blue);
    --sidebar-border-color: var(--nav-background-color);
    --sidebar-link-color: var(--link-color-dark);

    --subtitle-text-color: var(--link-color-dark);
    --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;
        background-repeat: no-repeat;
        background-position: top;
    }
}

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-main-bottom-group {
    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(--sidebar-link-color);
}

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

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

.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:

        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);
}

.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;
}