body{

    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-image: url("imagenes/tablero.webp");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    height: 100%;
    width: 100%;



}


header{

    background-color: chocolate;
    width: 100%;
    text-align: center;
    border: 2px solid brown ;
    margin-bottom: 2vh;
    height: 8vh;
    font-size:2vh;
}


#Tablero {

    background-color: green;
    border: 5px solid black;
    border-radius: 25px;
    height: 75vh;
    width: 90%;
    padding:4% 0 5% 0% ;
    margin: 0 10vw 4vh 10vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

}

.carta {

    background-color: rgb(79, 47, 9);
    width:12vw;
    height:35vh;
    border: 3px solid black;
    border-radius: 25px;
    margin: 2% 4%;
    display: flex;
    /*background-size: 200px;*/
}



.numero{

    margin: 10% 5% 0% 5%;
    font-size: 2vh;
    font-weight: bold;
}
.palo{

    font-size: 4vh;
    margin: 1vh 1vw 0 1vw;
   
}
#consola{

    border: 2px solid black;
    border-radius: 25px;
    width: 100%;
    background-color: cadetblue;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 8vh;

}
.Boton{
    background-color: dodgerblue;
    width: 20%;
    height: 80%;
    border-radius: 25px;
    margin: 0.5vh 2vw;
    font-size: 90%;
    font-weight: bold;
}

.cartaSeleccionada{
    border: 3px solid yellow;
}

.corazon{
    color:red;
    background-image: url(imagenes/corazon.png);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position-y: center;
    background-position-x: center;
}
.diamante{
    color:red;
    background-image: url(imagenes/diamante.png) ;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-y: center;
    background-position-x: center;
}
.pica{
    color:black;
    background-image: url(imagenes/pica.webp);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-y: center;
    background-position-x: center;
   
}
.trebol {
    color:black;
    background-image: url(imagenes/trebol.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-y: center;
    background-position-x: center;
}

footer{
    background-color: chocolate;
    color: black;
    font-size:2vh;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    width: 100%;
    text-align: center;
    align-items: center;
    align-content: center;
    height: 5vh;
}