*, *::after, *::before {
    box-sizing: border-box;
}

:root {
    --cell-size: 10vh;
    --mark-size: calc(var(--cell-size) * 0.8);
    --backround-color: #364968;
    --grid-color: #2A769A;
    --x-color: #41C3BE;
    --o-color: #F7F36B;
    --win-cell-color: #2f8bb6;
    --line-color: #C1224F;
    --font-color: #ECECEC;
    --dialog-color: #2a779ab6;
    --game-font: 'Nunito', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--backround-color);
    color: var(--font-color);
    font-family: var(--game-font);
}

button {
    margin: 5px;
    font-family: var(--game-font);
    font-size: x-large;
    color: var(--font-color);
    background-color: var(--backround-color);
    border-radius: 5px;
    padding: 5px 15px;
    border: 3px solid var(--backround-color);
}

button > svg {
    display: block;
    fill: var(--font-color);
}

button:hover {
    background-color: var(--win-cell-color);
}

footer {
    display: flex;
    position: fixed;
    justify-content: center;
    width: 100vw;
    bottom: 0;
    left: 0;
    font-size: small;
}

fieldset {
    margin: 0.5em;
    border-radius: 10px;
    border: 3px solid var(--grid-color)
}

.game-title {
    display: flex;
    justify-content: center;
}

#optionsBtn {
    position: absolute;
    margin: 10px;
    right: 0;
}

.dialog {
    display: none;
    position: absolute;
    z-index: 999;
    top: 10%;
    left: 20%;
    right: 20%;
    background-color: var(--dialog-color);
    border-radius: 10px;
    padding: 10px;
}

.dialog.show {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.dialog.options {
    align-items: stretch;
}

#options-title {
    align-self: center;
}

#options-buttons {
    display: flex;
    grid-row: 3;
    grid-column: 1 / 3;
    justify-content: flex-end;

}

#status-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    justify-items: center;
    align-content: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: x-large;
}


.board {
    position: relative;
    width: 100vw;
    height: 70vh;
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, auto);
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border-right: 5px solid var(--grid-color);
    border-bottom: 5px solid var(--grid-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@keyframes showWinningCell {
    from {
        background-color: var(--backround-color);
    }

    to {
        background-color: var(--win-cell-color);
    }
}

.cell.win {
    animation: showWinningCell 2s;
    animation-fill-mode: forwards;
}

.cell:nth-child(3n) {
    border-right: none;
}

.cell:nth-child(6) ~ .cell {
    border-bottom: none;
}

.cell.x::before,
.cell.x::after {
    background-color: var(--x-color);
}

.board.x .cell:not(.x):not(.o):hover::before,
.board.x .cell:not(.x):not(.o):hover::after{
    background-color: lightgray;
}

.cell.x::before,
.cell.x::after,
.board.x .cell:not(.x):not(.o):hover::before,
.board.x .cell:not(.x):not(.o):hover::after {
    content: '';
    position: absolute;
    width: calc(var(--mark-size) * .2);
    height: var(--mark-size);
    border-radius: calc(var(--mark-size) * .1);
}

.cell.x::before,
.board.x .cell:not(.x):not(.o):hover::before {
    transform: rotate(45deg);
}

.cell.x::after,
.board.x .cell:not(.x):not(.o):hover::after {
    transform: rotate(-45deg);
}

.cell.o::before {
    border: calc(var(--mark-size) * .2) solid var(--o-color);
}

.board.o .cell:not(.x):not(.o):hover::before {
    border: calc(var(--mark-size) * .2) solid lightgray;
}

.cell.o::before,
.board.o .cell:not(.x):not(.o):hover::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: var(--mark-size);
    height: var(--mark-size);
}

.line {
    position: absolute;
    border-radius: 4px;
    background: var(--line-color);
    display: none;
}

.line.h {
    display: block;
    width: calc(var(--cell-size) * 2.8);
    height: 8px;
    animation: drawHorizontalLine 1s;
}

.line.h.r1 {
    translate: 0 calc(var(--cell-size) * -1);
}

.line.h.r3 {
    translate: 0 var(--cell-size);
}

.line.v {
    display: block;
    height: calc(var(--cell-size) * 2.8);
    width: 8px;
    animation: drawVerticalLine 1s;
}

.line.v.c1 {
    translate: calc(var(--cell-size) * -1);
}

.line.v.c3 {
    display: block;
    translate: var(--cell-size)
}

.line.d {
    display: block;
    width: calc(var(--cell-size) * 3.8);
    height: 8px;
    animation: drawDiagonalLine 1s;
}

.line.d.d1 {
    rotate: 45deg;
}

.line.d.d2 {
    rotate: -45deg;
}

@keyframes drawHorizontalLine {
    from {
        width: 0;
        transform: translateX(calc(var(--cell-size) * -1.4));

    }
    to {
        width: calc(var(--cell-size) * 2.8);
        transform: translateX(0);
    }
}

@keyframes drawVerticalLine {
    from {
        height: 0;
        transform: translateY(calc(var(--cell-size) * -1.4));

    }
    to {
        height: calc(var(--cell-size) * 2.8);
        transform: translateY(0);
    }
}

@keyframes drawDiagonalLine {
    from {
        width: 0;
        transform: translate(calc(var(--cell-size) * -1.9));

    }
    to {
        width: calc(var(--cell-size) * 3.8);
        transform: translate(0);
    }
}