body {
    font-family: Arial, sans-serif;
    display: grid;
}

.stack {
    grid-column: 1;
    grid-row: 1;
}

#confetti-canvas {
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none
}

div#bingoDiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table#bingoCard {
    font-size: 1.5em;
    border: 2px solid black;
    border-collapse: collapse;
    width: 80vmin;
    height: 80vmin;
    position: relative;
    table-layout: fixed;
}

table#bingoCard td {
    text-align: center;
    border: 1px solid Gainsboro;
    user-select: none;
}

table#bingoCard td.selected {
    background-color: palegreen;
}

td.searchResult {
    font-weight: bold;
    color: blue;
}

table#bingoCard td.freeSpace {
    font-weight: bold;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

table#controls {
    font-size: 1.2em;
    width: 80vmin;
}

.counter {
    font-size: 1.2em;
}

table#controls button {
    font-size: 1em;
}

svg.line {
    width: 100%;
    height: 100%;
}