main {
    max-width: 40em;
}

button {
    color: var(--text1);
    background: var(--bgLightGray);
    border-radius: 0.2em;
}

#boardSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#board {
    padding: 0.8em;
    background: var(--bg4);
    border: 1px solid var(--border);
    border-radius: 0.5em;
    font-size: 150%;
}

.sizeSelect {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    font-size: 120%;
}

.primeInput {
    user-select: none;
    -webkit-user-select: none;
    width: 1.5em;
    padding: 0.05em;
    text-align: center;
    color: var(--text2);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 0.2em;
}

td {
    padding: 0.05em 0.15em;
    text-align: center;
}

.sign {
    text-align: center;
}

.sum {
    color: var(--bgRed);
/*    background: var(--bgRed);*/
    /*border-radius: 0.2em;*/
}

.rowSum {
    text-align: right;
}

#newGame, #resetGame {
    font-size: 120%;
}

dialog {
    padding: 1em;
    font-size: 150%;
    text-align: center;
    color: var(--text1);
    background: var(--bgGreen);
    border-radius: 0.5em;
    border: 1px solid var(--border);
}