/*
  Project: Tic-Tac-Toe with MiniMax AI
  Author: Anderson Pereira dos Santos
  Repository: https://github.com/andersonpereiradossantos/tic-tac-toe-ai-minimax
  License: MIT License
  Description: This CSS file contains the styling for the Tic-Tac-Toe game with MiniMax AI. Customize the styles to fit your project's needs. Feel free to use and modify this code according to the terms of the MIT License.
*/

.container {
    text-align: center;
}

.btn {
    font-family: "Raleway", sans-serif;
}

.cell {
    width: 100px;
    height: 100px;
    font-size: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Indie Flower', 'Comic Sans', cursive;
    border-width: 3px !important;
    box-sizing: border-box;
}

.cell:not(:empty) {
    background-color: #f0f0f0;
}

.cell:hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

#result {
    height: 40px;
    font-size: 22px;
}

#line {
    height: 3px;
    background: #DC3545;
    position: absolute;
}

.line-diagonal-right {
    width: 361px;
    transform: rotateY(0deg) rotate(45deg);
    translate: -43px 142px;
}

.line-diagonal-left {
    width: 361px;
    transform: rotateY(180deg) rotate(45deg);
    translate: -44px 150px;
}

.line-horizontal-center {
    width: 300px;
    translate: -12px 145px;
}

.line-horizontal-top {
    width: 300px;
    translate: -12px 45px;
}

.line-horizontal-bottom {
    width: 300px;
    translate: -12px 247px;
}

.line-vertical-left {
    width: 299px;
    transform: rotateY(180deg) rotate(90deg);
    translate: -111px 147px;
}

.line-vertical-center {
    width: 299px;
    transform: rotateY(180deg) rotate(90deg);
    translate: calc(0% - 9px) 147px
}

.line-vertical-right {
    width: 299px;
    transform: rotateY(180deg) rotate(90deg);
    translate: calc(50% - 58px) 147px;
}

.cell[data-mark="X"]{
    color: #4682B4;
}

.cell[data-mark="O"]{
    color: #FF82AB;
}

.tic-tac-toe-row {
    flex-wrap: nowrap;
}

.tic-tac-toe-row .row{
    flex-wrap: nowrap;
}

.tic-tac-toe__container {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
}

.tic-tac-toe__table-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tic-tac-toe__table {
    width: 75%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

    /* Column width ratio: 6 : 1 : 6 : 1 : 6  */
    .tic-tac-toe__table colgroup col:nth-child(1) {
        width: 6fr;
    }

    .tic-tac-toe__table colgroup col:nth-child(2) {
        width: 1fr;
    }

    .tic-tac-toe__table colgroup col:nth-child(3) {
        width: 6fr;
    }

    .tic-tac-toe__table colgroup col:nth-child(4) {
        width: 1fr;
    }

    .tic-tac-toe__table colgroup col:nth-child(5) {
        width: 6fr;
    }

.tic-tac-toe__cell {
    padding: 0;
    vertical-align: top;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.tic-tac-toe__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 420px) {
    .tic-tac-toe__table {
        width: 100%;
    }
}

.tic-tac-toe__cell_30 {
    width: 30%;
}

.tic-tac-toe__cell_5 {
    width: 5%;
}