body{
    padding: 0;
    margin: 0;
    background: green;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

}


header{
    height:10%;
    width: 100%;
    background-color: coral;
    color: whitesmoke;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-bottom: 2%;
    
}

footer{
    height:10%;
    width: 100%;
    color: whitesmoke;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: coral;
}

#contador{
    height: 5vh;
    border: solid, 1px black;
    border-radius: 25px;
    background-color: cadetblue;
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    padding: 1%;
    justify-content: center;

}
#contador p {

    margin: 1%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}


#jugador1{
    color:darkblue;
}

#jugador2{
    color:red;
}

#Tablero {

    border: solid black 2px;
    border-radius: 25px;
    background-color: blue;
    width: 80vw;
    height:80vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 5%;
    margin:0 2% 2% 2%
    

}

.carta {

    border: solid black 2px;
    border-radius: 25px;
    width:8vw;
    height:20vh;
    margin:1%;
    display: flex;
    justify-content: center;
    align-items: center;
   

}
.carta:hover{
    cursor: pointer;
}


.cartaTapada{
    background-color: rgb(116, 82, 4);
}

.cartaDestapada{

    background-color: rgb(35, 119, 147);

}




.balon {
    background-image: url("imagenes/balon.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 80%;
    background-position-y: center;
    background-position-x: center;

}

.cactuar {
    background-image: url("imagenes/cactuar.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 80%;
    background-position-y: center;
    background-position-x: center;
}

.cubo {
    background-image: url("imagenes/cubo.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 90%;
    background-position-y: center;
    background-position-x: center;
}

.flor {
    background-image: url("imagenes/flor.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 90%;
    background-position-y: center;
    background-position-x: center;
}

.imperio {
    background-image: url("imagenes/imperio.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 90%;
    background-position-y: center;
    background-position-x: center;
}

.mog {
    background-image: url("imagenes/mog.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 90%;
    background-position-y: center;
    background-position-x: center;
}

.piramide {
    background-image: url("imagenes/piramide.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 60%;
    background-position-y: center;
    background-position-x: center;
}

.rebel {
    background-image: url("imagenes/rebel.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 80%;
    background-position-y: center;
    background-position-x: center;
}

.spiderman {
    background-image: url("imagenes/spiderman.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 60%;
    background-position-y: center;
    background-position-x: center;
}
.venom {
    background-image: url("imagenes/venom.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-size: 90%;
    background-position-y: center;
    background-position-x: center;
}