:root {
    --page-background: #048BA8;
    --main-background: #048BA8;
    --article-background: #ECFEFA;
    --text-color: #2E4057;
    --meta-text-color: #55572e;
    --highlight-color: #F18F01;
    --meta-color: #FFD085;
    --new-link-color: #251FD6;
    --visited-link-color: #502086;
    --external-article-background: #2F2D2E;
    --external-text-color: #FFEFD6;
    --external-meta-text-color: #e8e9d6;
    --external-highlight-color: #526A24;
    --external-meta-color: #2F3D15;
    --external-new-link-color: #CEE4FE;
    --external-visited-link-color: #FECED8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #2E4057;
        --main-background: #2E4057;
        --article-background: #2F2D2E;
        --text-color: #FFEFD6;
        --meta-text-color: #e8e9d6;
        --highlight-color: #526A24;
        --meta-color: #2F3D15;
        --new-link-color: #CEE4FE;
        --visited-link-color: #FECED8;
        --external-article-background: #ECFEFA;
        --external-text-color: #2E4057;
        --external-meta-text-color: #55572e;
        --external-highlight-color: #F18F01;
        --external-meta-color: #FFD085;
        --external-new-link-color: #251FD6;
        --external-visited-link-color: #502086;
    }
}

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

article.external a:link {
    color: var(--external-new-link-color);
}
article.external a:visited {
    color: var(--external-visited-link-color);
}

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

main {
    background-color: var(--main-background);
    margin-top: 2rem;
}

div.thread {
    margin: 0.25rem;
}

div.thread:not(:has(div.parents)) {
    padding: 0rem;
}

div.thread > article {
    margin: 0rem;
    border-radius: 0rem;
}

div.thread > article:first-of-type {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

div.thread > article:last-of-type {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

div.parents {
    background-color: var(--article-background);
    border-color: var(--highlight-color);
    border-style: dashed;
    min-width: 300px;
    max-width: 1200px;

    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0rem;
    margin-right: 0rem;
    padding: 0rem;
    border-radius: 0.5rem;
}

div.parents > h2 {
    margin: 1rem;
}

article {
    background-color: var(--article-background);
    border-color: var(--highlight-color);
    border-style: solid;

    min-width: 300px;
    max-width: 1200px;

    margin: 0.25rem;
    padding: 0rem;
    border-radius: 0.5rem;
}

article.external {
    background-color: var(--external-article-background);
    border-color: var(--external-highlight-color);
    color: var(--external-text-color);
}

article h1 {
    background-color: var(--highlight-color);

    margin: 0rem;
    padding: 0.25rem;
}

article.external h1 {
    background-color: var(--external-highlight-color);
}


article > dl {
    margin: 1rem;
}

article > div.e-content {
    margin: 1rem;
}

article > p {
    margin: 1rem;
}

article > div.attribution {
    background-color: var(--meta-color);

    font-size: 0.75rem;
    margin: 0rem;
    padding: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

article.external > div.attribution {
    background-color: var(--external-meta-color);
}

div.ask {
    background-color: var(--meta-color);
    border-color: var(--highlight-color);
    border-style: dashed;
    margin-top: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    padding: 1rem;
}

img {
    width: 100%;
}

blockquote {
    font-style: italic;
}

th, td {
    margin: 0em;
    padding: 1em;
}

table, tr, th, td {
    border-collapse: collapse;
    border-style: solid;
}

nav {
    background-color: var(--meta-color);
    border-color: var(--highlight-color);
    border-bottom-style: solid;
    padding: 1rem;
    margin: -1rem;
}

a.action {
    background-color: var(--meta-color);
    border-color: var(--highlight-color);
    border-style: solid;
    border-radius: 0.5rem;
    margin: 1rem;
    padding: 0.5rem;
}

span.p-category {
    color: var(--meta-text-color);
    font-style: italic;
    font-size: 0.75rem;
    padding: 0.25rem;
}

article.external span.p-category {
    color: var(--external-meta-text-color);
}