body {
    background: #888;
}

main {
    position: relative;
    display: flex;
    flex: column nowrap;
}

#items {
    max-width: 70ch;
}

.entries tr {
    vertical-align: baseline;
}

.fresh {
    font-weight: bold;
}

td a { padding: 6px; }

.entry-timestamp {
    font: 0.9em monospace;
    padding: 4px;
    min-width: 10em;
}

#list {
    padding: 2ch;
}

aside {
    flex-grow: 1;
}

aside li {
    list-style: none;
    text-align: right;
}

aside li:nth-child(even),
tr:nth-child(even)
{
    background: inherit;
}

aside li:nth-child(odd),
tr:nth-child(odd)
{
    background: #aaa;
}

aside a {
    padding: 2px;
}

a { display: block; }

a:link {
    text-decoration: none;
    color: black;
}
a:visited {
    color: inherit;
}
aside a:visited { font-style: normal; }
a:hover {
    background: yellow;
}
a:active{
    background: cyan;
}

header {
    display: flex;
    flex: row wrap;
    margin: 1ch 0;
    align-items: baseline;
    justify-content: space-between;
}
header h2, header h1 {
    margin: 0;
}
header h2 a { display: inline; }
header .flinks {
    font-size: 80%;
    text-align: right;
    flex-grow: 1;
}

body>nav {
    border-bottom: 1px solid;
    margin-top: 0;
    text-align: right;
}
body>nav a { display: inline; }

.last-updated {
    font-style: italic;
    font-size: 80%;
    text-align: right;
}

.entries { border-collapse: collapse; }

.entries, .entry-title { width: 100%; }

.entry-extra a { color: blue; display: inline; font-family: monospace; }

.entry-title, .entry-timestamp, .entry-extra {
    padding: 0; margin: 0; border: none;
}

header a { display: inline; }

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

@media (prefers-color-scheme: light) {
    body { background: white; color: black; }
    aside li:nth-child(even),
    tr:nth-child(even) { background: white; }
    aside li:nth-child(odd),
    tr:nth-child(odd) { background: #eee; }
    a:link { color: black; }
    a:hover { background: yellow; }
    a:active { background: cyan; }
    .entry-extra a { color: blue; }
}

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

@media screen and (max-width: 720px) and (prefers-color-scheme: dark) {
    aside li { background: black !important; }
}

@media screen and (max-width: 720px) and (prefers-color-scheme: light) {
    aside li { background: white !important; }
}

footer {
    font-size: 80%;
    font-style: italic;
    text-align: right;
}

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

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

.yt a {
    color: #ff0000;
}

.youtube {
    border-left: 1px solid #ff0000;
}

.reddit {
    border-left: 3px double #ff3000;
}

.facebook {
    border-left: 3px double #4267b2;
}

.twitter {
    border-left: 1px solid #179cf0;
}