canvas {
    max-width: 800px;
    max-height: 500px;
}

body {
    margin: 2rem;

}
div {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

td {
    padding: 0 0.7rem;
}

tr.win {
    background: lightgreen;
}

.summary {
    font-weight: bold;
}

table {

    text-align: center;

    th, td {
        min-width: 1.7em;
        /* font-size: 11pt; */

        border: 1px solid transparent;
        &:hover {
            border: 1px solid grey;
        }
    }

    .header-row,
    .ascension {
        background: lightgrey;
    }

    .ironclad {
        background: pink;
    }

    .silent {
        background: lightgreen;
    }

    .regent {
        background: orange;
    }

    .necrobinder {
        background: plum;
    }

    .defect {
        background: lightblue;
    }
}

.tabContainer {

    > .tabBar {

        /* background: gainsboro; */
        width: 100%;
        margin: 0;
        padding-top: 0.5rem;
        list-style: none;
        display: flex;

        > .tabLink {
            display: flex;
            flex: 1;

            padding: 0.5rem;
            transition: all .35s ease;
            text-decoration: none;

            background: inherit;
            border: 1px solid black;
            /* border-bottom: 1px solid transparent; */
            margin: 0;


            &.active {
                background: white;
                border-bottom: 1px solid transparent;
            }

            &:focus {
                background: white;
            }

            &:hover {
                background: lightgray;
            }
        }
    }

    > .tabs {
        overflow: scroll;
        margin-top: 0.25em;
        padding-top: 0.25em;

        > .tabContent {

            display: none;

            &.active {
                display: block;
            }
        }
    }
}