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;
}