:root
{
    --ProfilePicSize: 64px;
}

body
{
    font-family: Verdana, Arial;
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --ForegroundPrimary: black;
        --BackgroundPrimary: #f0f0f0;
        --BackgroundLayer1: #e0e0e0;
        --BackgroundLayer2: #d0d0d0;
        --BackgroundMutualAidReq: #dad0fb;
        --BackgroundMutualAidOffer: #d0e0f0;
        --EdgeNewHighlight: #00c000;
        --BackgroundNewHighlight: #e0f0e0;
        --SubtleAlphaBlend: rgba(0, 0, 0, 0.2);
    }
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --ForegroundPrimary: white;
        --BackgroundPrimary: #202020;
        --BackgroundLayer1: #303030;
        --BackgroundLayer2: #404040;
        --BackgroundMutualAidReq: #4a406b;
        --BackgroundMutualAidOffer: #304050;
        --EdgeNewHighlight: #e0ffe0;
        --BackgroundNewHighlight: #506050;
        --SubtleAlphaBlend: rgba(255, 255, 255, 0.2);
    }

    a
    {
        color: white;
    }

        a:visited
        {
            color: white;
        }

        a:hover
        {
            color: #ffd0ff;
        }
}


body
{
    background-color: var(--BackgroundPrimary);
    color: var(--ForegroundPrimary);
}


header nav
{
    margin-left: 0.5rem;
}


h1.TimelineDivider
{
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
}

    h1.TimelineDivider:before, h1.TimelineDivider:after
    {
        content: "";
        flex: 1 1;
        border-bottom: 1px solid;
        margin: auto;
    }

    h1.TimelineDivider:before
    {
        margin-right: 1rem;
    }

    h1.TimelineDivider:after
    {
        margin-left: 1rem;
    }


h2
{
    margin: 0;
}

h3
{
    margin: 0;
    margin-bottom: 0.5rem;
}

p
{
    margin-top: 0;
}

.Columnar
{
    display: flex;
    flex-wrap: nowrap;
}

.Footer
{
    border-top: 1px solid white;
    margin-top: 1rem;
}

.WithFooter
{
    display: grid;
    align-items: start;
    width: 100%;
}

    .WithFooter .Footer
    {
        align-self: flex-end;
        margin: 0 0 0.5rem 0;
    }

dl.SpoonCastFields
{
    display: grid;
    grid-template-columns: max-content auto;
}

    dl.SpoonCastFields dt
    {
        grid-column-start: 1;
        font-weight: bold;
    }

    dl.SpoonCastFields dd
    {
        margin-left: 0.5rem;
        grid-column-start: 2;
    }


.SpoonCastFeed
{
    border-radius: 5px;
    background-color: var(--BackgroundLayer1);
    margin: 1rem;
    padding: 0.5rem;
}

.SpoonCastStrandDiscussion
{
    border-radius: 5px;
    background-color: var(--BackgroundLayer1);
    margin: 1rem;
    padding: 0.5rem;
}

.SpoonCastThingDiscussion
{
    border-radius: 5px;
    background-color: var(--BackgroundLayer2);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

.SpoonCastThingLink
{
    border-radius: 5px;
    background-color: var(--BackgroundLayer2);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

.SpoonCastThingMutualAidOffer
{
    border-radius: 5px;
    background-color: var(--BackgroundMutualAidOffer);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

.SpoonCastThingMutualAidRequest
{
    border-radius: 5px;
    background-color: var(--BackgroundMutualAidReq);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

figure.SpoonCastProfilePic
{
    border-radius: 5px;
    background-color: var(--SubtleAlphaBlend);
    width: 120px;
    margin: 0 1rem 0 0;
    padding-top: 0.5rem;
    text-align: center;
}

    figure.SpoonCastProfilePic img
    {
        border-radius: 5px;
        max-height: var(--ProfilePicSize);
        max-width: var(--ProfilePicSize);
    }

    figure.SpoonCastProfilePic figcaption
    {
        font-weight: bold;
        padding: 0 0.25rem 0.2rem 0.25rem;
    }


.SpoonCastTimestamp
{
    padding-top: 0.2rem;
    font-size: 0.8rem;
}


.SpoonCastNewHighlight
{
    border: 1px solid var(--EdgeNewHighlight);
    padding: 0.5rem;
}


table.SpoonCastTable
{
    width: 100%;
    background-color: var(--BackgroundLayer2);
}

    table.SpoonCastTable thead
    {
        background-color: var(--BackgroundLayer1);
        font-weight: bold;
        text-align: center;
    }

    table.SpoonCastTable th
    {
        padding: 0.3rem;
    }

    table.SpoonCastTable td
    {
        padding: 0.3rem;
    }

    table.SpoonCastTable th:first-child
    {
        text-align: left;
    }

    table.SpoonCastTable td:first-child
    {
        text-align: left;
    }

    table.SpoonCastTable tbody td
    {
        background-color: var(--BackgroundLayer2);
        text-align: center;
    }

    table.SpoonCastTable tbody tr.SpoonCastNewHighlight td
    {
        border: 1px solid var(--EdgeNewHighlight);
        background-color: var(--BackgroundNewHighlight);
    }