:root {
    --base: #f0f0f0;
    --base-2: #fff;
    --base-3: #ffffde;
    --contrast: #000;
    --contrast-2: #777;
    --border: #efefef;
    --border-2: #ddd;
    --accent: #0000ee;
    --accent-2: #b833e1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --base: #171717;
        --base-2: #000;
        --base-3: #1f1f1f;
        --contrast: #fff;
        --contrast-2: #ccc;
        --border: #2b2b2b;
        --border-2: #444;
        --accent: #ffb300;
        --accent-2: #f06292;
    }
}

*,::before,::after { box-sizing: border-box }

body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: calc(0.9375em + 0.2vw);
    line-height: 1.4;
    margin: 0;
    background: var(--base);
    color: var(--contrast);
}

:link {
    color: var(--accent);
}

:visited {
    color: var(--accent-2);
}

header a, summary a, .feeds a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

table th, table td {
    padding: .5em;
}

.wrapper {
    background: var(--base-2);
    max-width: 48em;
    margin: 0 auto;
    padding: 2.5vw;
}

header, header ul {
    display: flex;
    gap: 1rem;
    align-items: center;
}

header {
    margin-bottom: 1.5em;
    padding-bottom: .5em;
    border-bottom: 3px dashed var(--border-2);
    justify-content: space-between;
    flex-wrap: wrap;
}

header h3 {
    margin: 0;
}

header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer {
    font-size: 85%;
    color: var(--contrast-2);
    text-align: center;
    margin-top: 4em;
}

details {
    border: 1px solid var(--border);
}

details summary {
    list-style: none;
    padding: .75em;
}

details summary::before {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: .25em;
    margin-top: .25em;
    float: right;
    transform: rotate(-90deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center center;
    background-size: 1.125rem auto;
    background-repeat: no-repeat;
    content: "";
}
details[open]>summary::before {
    transform: rotate(0);
}

details > div {
    padding: .75em;
    background: var(--base-3);
}

details > div img {
    display: block;
    margin: 1em auto;
    max-width: 100%;
}

.feeds > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    padding: .75em;
}

nav.pagination ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    gap: 1em;
    justify-content: space-between;
}

.feed-img {
    display: inline-block;
    height: 1.25rem;
    width: auto;
    border-radius: 5rem;
    vertical-align: middle;
}