button {
    width: 217px;
    height: 143px;
    background-image: url(./images/reverso.jpg);
    cursor: pointer;
    /* Al desactivar los eventos de ratón se desactivará también esta configuración de estilo del cursor*/
    background-repeat: no-repeat;
    background-position: center;
}

/*Uso etiqueta button en las cartas y etiqueta input en el botón de repartir cartas: este estilo no afectará a este último.*/


@media (max-width: 1255px) {

    button {
        width: 155px;
        height: 105px;
        background-size: 100%;
    }

    body {
        background-color: antiquewhite;
    }
}

@media (max-width: 1075px) {

    button {
        width: 115px;
        height: 75px;
        background-size: 100%;
    }

    body {
        background-color: rgb(192, 187, 42);
    }
}

@media (max-width: 755px) {

    button {
        width: 95px;
        height: 65px;
        background-size: 100%;
    }

    body {
        background-color: rgb(4, 101, 118);
    }
}

@media (max-width: 615px) {

    button {
        width: 65px;
        height: 45px;
        background-size: 100%;
    }

    body {
        background-color: rgb(162, 68, 117);
    }
}

@media (max-width: 430px) {

    button {
        width: 45px;
        height: 35px;
        background-size: 100%;
    }

    body {
        background-color: rgb(254, 42, 0);
    }

}

@media (max-width: 430px) {

    button {
        width: 35px;
        height: 25px;
        background-size: 100%;
    }

    body {
        background-color: rgb(49, 251, 89);
    }
}