@import "css/phonics.css";

td {
    text-align: center;
    vertical-align: middle;
    max-width: 98%;
    max-height: 98%;
}

.box {
    height: var(--box-height);
    width: var(--box-width);
    padding: 5px;
}

.box--border {
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;

}

button {
    width: var(--button-width) !important;
}

.instruct-size {
    font-size: var(--instruct-font-size);
    line-height: 1.3;
}

table {
    padding: var(--table-padding);
    margin: 0;
}

tbody, tr {max-width: 98%; max-height: 98%;}

.ball--border {
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--box-width);
    font-weight: 300
}

.upper-letter-tile {
    line-height: 100%;
    font-size: calc(var(--tile-font-size) * 1.75);
    padding: 3px;
    font-weight: 100;
    cursor: pointer;
}

.ball {
    font-size: var(--ball-size);
    line-height: var(--ball-size);
    width: 100%;
    height: var(--ball-size);
    text-align: center;
    vertical-align: bottom;
    display: inline-block;
}




.start-hidden {visibility: hidden}