:root {
    --tile-size: 100px;
    --gap: 5px;
    --color-bg: black;
    --color-field: white;
}

html,
body {
    font-family: 'Courier New', Courier, monospace;
}

header {
    text-align: center;
}

.scoreboard {
    text-align: center;
    font-size: xx-large;
}

.restart-game {
    text-align: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}


.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gap);
    max-width: calc((var(--tile-size) * 3) + (var(--gap) * 2));
    background-color: var(--color-bg);
}

.field {
    background-color: var(--color-field);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tile-size);
    height: var(--tile-size);
}

.mark {
    width: 70%;
}

.mark--hidden {
    display: none;
}

.o__circle {
    fill: none;
    stroke: blue;
    stroke-width: 3;
    stroke-linecap: round;
}

.x__line {
    stroke: red;
    stroke-width: 3;
    stroke-linecap: round;
}

.mark--win .o__circle,
.mark--win .x__line {
    stroke: green !important;
}