/* MotoGP-Desktop*/
/* Hoja de estilo para el juego de memoria con cartas */

/* Regla con el estilo general para las tarjetas del juego */
/* especificidad: 002 */
main article {
    width: 20vw;
    height: 20em;
    position: relative;
    transform: scale(1);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, .3);
}

/* Regla con la transformación que permite girar la carta cuando se le pone el atributo personalizado data-estado al valor volteada */
/* especificidad: 012 */
main article[data-estado=volteada] {
    transform: rotateY(180deg);
}


/* especificidad: 012 */
main article[data-estado=revelada] {
    transform: rotateY(180deg);
}

/* Reglas con los estilos generales para el encabezado y la imagen de la carta */
/* especificidad: 002 */
article h3,
article img {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 0.5em;
    background: #B8CEFF; /* Advertencia:hereda el color de de letra del body ->#642207*/
    backface-visibility: hidden;
}

/* Regla para centrar el texto "Memory Card" vertical y horizontalmente en cada carta */
/* especificidad: 002 */
article h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Regla para rotar las imágenes y que se vean correctamente cuando se giran las cartas */
/* especificidad: 002 */
article img {
    transform: rotateY(180deg);
}


@media (min-width: 320px) and (max-width: 799px) {

    /* Especificidad (0,0,2)*/
    main article {
        width: 35vw; /* Advertencia: redefinición en media-query para que se vean mejor las cartas en los móviles */
        height: 20em;  /* Advertencia: redefinición en media-query para que se vean mejor las cartas en los móviles */
    }

}