.divcards {
    body {
        font-family: sans-serif;
        background-color: black;
        color: white;
    }

    body.run_tests {
        font-family: sans-serif;
        background-color: white;
        color: black;
    }

    table {
        border-collapse: collapse;
    }

    grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        "title title title title"
        "filters_header filters_header filters_header filters_header"
        "A B C D"
        "maps_header cards_header rewards_header tiers_header"
        "maps cards rewards tiers"
    }

    grid > h1.page_title {
        grid-area: title;
    }

    grid > h2.filters {
        grid-area: filters_header;
    }

    grid > list.maps_header { grid-area: maps_header; }
    grid > list.cards_header { grid-area: cards_header; }
    grid > list.rewards_header { grid-area: rewards_header; }
    grid > list.tiers_header { grid-area: tiers_header; }

    grid > list.maps { grid-area: maps; }
    grid > list.cards { grid-area: cards; }
    grid > list.rewards { grid-area: rewards; }
    grid > list.tiers { grid-area: tiers; }

    listitem {
        display: block;
    }

    listitem:hover,
    tr.datarow:hover {
        background-color: #aaaaff;
        cursor: pointer;
    }

    .maps {
        width: 10em;
        border: 1px solid black;
    }

    filter > input,
    filter > button {
        font-size: 1.5em;
    }

    .currencyitem {
        color: gray;
    }

    .uniqueitem {
        color: orange;
    }

    .rareitem {
        color: yellow;
    }

    .white {
        color: white;
    }

    .corrupted {
        color: red;
    }
}