body {
    font: 16px/1.2 sans-serif;
}

main {
    display: flex;
    flex-flow: row nowrap;
}

#items {
    max-width: 70ch;
}

header {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
}

time {
    font-family: monospace;
}

#page-nav {
    border-bottom: 1px solid;
    padding-bottom: 4px;
}

#last-updated,
nav,
footer {
    font-size: 80%;
    text-align: right;
}

footer {
    border-top: 1px solid;
    margin: 1ch 0;
    padding: 1ch 0;
}

table, .entry-title {
    width: 100%;
    border-collapse: collapse;
}

td.entry-timestamp {
    font: 50%/1.1 monospace;
    text-align: right;
    padding: 4px;
}

td.entry-extra {
    font-family: monospace;
    text-align: right;
    white-space: nowrap;
}

td.entry-extra a,
nav.flinks a {
    display: inline-block;
}

td {
    margin: 0; padding: 0;
}

tr:nth-child(even),
#feedlist li:nth-child(even)
{
    background: white;
}
tr:nth-child(odd),
#feedlist li:nth-child(odd)
{
    background: #eee;
}

aside li {
    list-style: none;
}

.fresh table,
aside .fresh {
    font-weight: bold;
}

a {
    display: block;
    padding: 4px 8px;
    color: inherit;
}

a:link {
    text-decoration: none;
}

a:visited { color: inherit; }

a:hover {
    background: yellow;
}

a:active {
    background: cyan;
}

.yt a { color: #ff0000; }
.youtube { border-left: 1px solid #ff0000; }
.reddit { border-left: 3px double #ff3000; }
.twitter { border-left: 1px solid #179cf0; }
.facebook { border-left: 3px double #4267b2; }

a#logo,
a.anchor,
footer a,
#page-nav a {
    padding: 0;
    display: inline;
}

footer a:link {
    text-decoration: underline;
}

@media screen and (max-width: 720px) {
    * { border: none; padding: 0; margin: 0; }
    .entries, .entry-title { width: 100%; }
    main, header {
        flex-flow: row wrap;
    }
    header, nav { padding: 4px; }
    aside {
        padding: 2ch;
        order: 1;
        border-bottom: 1px solid;
    }
    aside li {
        display: inline;
        background: inherit !important;
    }
    aside li::after {
        content: " //";
        background: inherit;
        font-weight: normal;
    }
     aside a { display: inline; }
    aside li:last-child::after {
        content: "";
    }
    #list { order: 2; }
    .entry-timestamp {
        display: none;
    }
}

@media screen and (prefers-color-scheme: dark) {
    body {background: black; color: white; }
    tr:nth-child(even),
    #feedlist li:nth-child(even)
    {
        background: black;
    }
    tr:nth-child(odd),
    #feedlist li:nth-child(odd)
    {
        background: #222;
    }
    a:hover {color: yellow; background: inherit;}
    a:active {color: cyan; background: inherit;}
    .entry-extra a {color: cyan;}
}