@media (prefers-color-scheme: light) {
    :root
    {
        --page-bg: #E3E3F3;
        --text-fg: black;
        --lines: #999;
        --item-bg: #CACAD9;
        --a-fg: blue;
        --a-visited-fg: purple;
    }
}
@media (prefers-color-scheme: dark) {
    :root
    {
        --page-bg: #2B2B32;
        --text-fg: #CCCCC2;
        --lines: #555;
        --item-bg: #1D1D21;
        --a-fg: #339CFF;
        --a-visited-fg: #FF5FFF;
    }
}

html
{
    font-family: sans-serif;
}

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

a
{
    color: var(--a-fg);
    text-decoration: none;
}

a:visited
{
    color: var(--a-visited-fg);
}

h1
{
    border-bottom: 1px dashed var(--lines);
}

h1.files
{
    margin-top: 2em;
}

div.grid-container
{
    display: grid;
    grid-template-columns: repeat(auto-fit, 180px);
    gap: 3em;
}

div.grid-item, div.grid-item-dir
{
    text-align: center;
    overflow: hidden;
    font-size: 80%;
    border: 1px solid var(--lines);
    background-color: var(--item-bg);
    padding: 1em;
}

div.grid-item, div.grid-item a
{
    height: 150px;
}

div.grid-item-dir, div.grid-item-dir a
{
    height: 75px;
}

div.grid-item a, div.grid-item-dir a
{
    display: flex;
    flex-direction: column;
}

div.grid-item img, div.grid-item-dir img
{
    min-width: 0;
    min-height: 0;
    object-fit: scale-down;
    object-position: center top;
}

div.grid-item p, div.grid-item-dir p
{
    flex-shrink: 0;
    flex-grow: 1;
    margin: 0;
    margin-top: 0.5em;

    display: flex;
    justify-content: center;
    align-items: end;
}

hr
{
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--lines);

    margin-top: 2em;
    margin-bottom: 2em;
}