/* Container  */
.container-game{
    height: 100vh;
    background-image: url(../img/Paisaje2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Cabecera (nombre juego) */
.col-titulo{
    height: 10vh;
    font-size: 40px;
}

.enlace-home{
    text-decoration: none;
    color: black;
}

/* Tablero  */
.col-tablero{
    height: 50vh;
}

.tablero{
    display: grid;
    grid-template-columns:1fr 1fr 1fr ;
    grid-template-rows:1fr 1fr 1fr ;
    background-color: black;
    height: 50vh;
    width: 50vh;
    border: 5px solid black;
    border-radius: 10px;
}

/* Casillas tablero  */
.casillas{
    background-color: rgb(5, 115, 119);
    margin: 5px;
    cursor: pointer;
    border-radius: 10px;
    color: transparent;
}

.casillas:hover{
    scale: 1.05;
    transition: 0.3s;
}

/* img X  */
.Ximg{
    background-image: url(../img/x.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* img O  */
.Oimg{
    background-image: url(../img/o.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 992px){
    .casillas{
        margin: 2px;
        border: 2px solid black;
    }
    .nombre{
        color: white;
    }
    .img-player{
        height: 20vh;
    }
}

/* Players grid */
.players{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 5fr 1fr;
}

.col-player{
    height: 30vh;
}

/* Imagenes trex y raptor  */
.img-player{
    height: 25vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Nombres player  */
.nombre{
    height: 100%;
    width: 100%;
}

/* Player 1 */
.trike{
    background-image: url(../img/trike.png);
    background-size: contain;
}

/* Player 2 */
.rex{
    background-image: url(../img/trex.png);
    background-size: contain;
}