.game .tic-tac-toe {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

    z-index: 100;
    position: relative;
    
    .box {

        width: 10vw;
        height: 10vw;

        font-size: 75pt;
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bold;

        border: 2px #fff solid;

        box-sizing: border-box;

        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;

        user-select: none;
        color: #e7e7e7;
        background-color: rgb(221, 121, 121);

        &.winner-box {

            background-color: rgba(255, 255, 255, 0);

            &.black-letters {

                color: rgb(48, 48, 48);
            }
        }
    }
}

.game .background-winner-div {

    background-color: rgba(95, 255, 62, 0.692);

    position: absolute;

    width: 30vw;
    height: 30vw;

    z-index: 10;

    opacity: 0%;

    transition: 1s ease-in-out;

    &.show {

        opacity: 100%;
        transition: 1s ease-in-out;
    }
}

.game .tic-tac-toe {

    .box {

        &#box-1 {

            border-top: 0px;
            border-left: 0px;   
        }

        &#box-2{

            border-top: 0px;
        }

        &#box-3 {

            border-top: 0px;
            border-right: 0px;
        }

        &#box-4 {

            border-left: 0px;
        }

        &#box-6 {

            border-right: 0px;
        }

        &#box-7 {

            border-bottom: 0px;
            border-left: 0px;
        }

        &#box-8 {

            border-bottom: 0px;
        }

        &#box-9 {

            border-bottom: 0px;
            border-right: 0px;
        }
    } 
}

.game.hidden {

    opacity: 0%;

    position: absolute;

    top: -100%;
}

.game .players-turn {

    // position: absolute;

    // top: -30%;
    // left: -20%;

    margin-bottom: 5vh;
    margin-left: -3vw;

    span {

        font-size: 30pt;
        font-weight: bold;

        color: #ffffff;
    }
}

.victory-message {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    font-size: 30pt;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    color: #fff;

    margin-top: 5vh;

    button {

        width: 30vw;
        max-width: 330px;
        height: 9vw;
        max-height: 100px;

        background: none;
        border: 2px solid #fff;
        border-radius: 10px;

        color: #fff;
        
        font-family:Arial, Helvetica, sans-serif;

        font-size: 21pt;
        font-weight: bold;

        margin-top: 3vh;

        transition: 0.4s ease-in-out;

        &:hover {

            background-color: rgba(0, 0, 0, 0.062);

            transition: 0.4s ease-in-out;
        }
    }

    &.hidden {

        opacity: 0%;
    }
}


@media (max-width: 900px) {
    
    .game .tic-tac-toe {

        width: 80vw;
        height: 80vw;

        .box {
            
            width: 100%;
            height: 100%;
        }
    }

    .game .players-turn {

        top: -10%;
        left: 0%;
    }

    .game .background-winner-div {

        width: 80vw;
        height: 80vw;
    }
}