.deck {
    display: block;
}

.card-space:hover .card {
    transform: rotateY(-180deg);
}

.card {
    border-radius: 10px;
    height: 210px;
    margin: 10px;
    /*width: 200px;*/
    width:100%;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

    .card h1 {
        margin-top: 5px;
    }

    .card p {
        margin-top: 0px;
    }

.face {
    border-radius: 10px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.1);
    /*background-color: #3973ac;*/
    background-color: #2d2d2d;
    color:white;
    padding: 20px;
    position: absolute;
    height: 100%;
    width: 100%;
}

    .face h1 {
        padding: 0;
    }

    .face.front {
        text-align: center;
        z-index: 20;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: rotateY(0deg);
    }

    .face.back {
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }