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

button {
    padding: 0.5rem;
    font-size: 1.3rem;
    transition: 0.3s background-color ease-in-out;
    background-color: azure;
    border: lightblue solid 1px;
    border-radius: 4px;
}

button:hover {
    background-color: lightblue;
}

button:active {
    background-color: rgb(96, 190, 221);
}

button:disabled {
    background-color: whitesmoke;
    border-color: lightgray;
}

div {
    box-sizing: border-box;
}

.board {
    width: 84vmin;
    margin: 10px auto;
    outline: 1px solid black;
}

.board .field {
    border: 1px solid black;
    width: 12vmin;
    height: 12vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
}

.game.winner.r .board, .game.r .log {
    background-color: pink;
}

.game.winner.b .board, .game.b .log {
    background-color: lightblue;
}

.board .row .field:first-child {
    clear: both;
}

.board .field .piece {
    width: 95%;
    height: 95%;
    border-radius: 50%;
}

.board .field .blue {
    background-color: blue;
}

.board .field .red {
    background-color: red;
}

.log {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
}

.game.winner .log {
    font-size: 3rem;
}

.game .menu-bar {
    text-align: center;
}

.game .menu-bar button {
    margin: 0 5px 5px 0;
}

.ad {
    margin-top: 3rem;
}