#cards {
    border:  1px solid #555555;
    width: 730px;
    height: 630px;
    max-width: 730px;
    max-height: 630px;
    padding: 10px;
    overflow: scroll;
    background-color: #E4E8EA;
    border-radius: 30px;
}

.card {
    position: relative;
    background-color: #ffffff;
    color: #555555;
    font: 12px/14px sans-serif;
    width:200px; /* or whatever width you want. */
    max-width:200px; /* or whatever width you want. */
    height: 276px;
    max-height: 276px;
    padding: 10px;
    border:  1px solid #555555;
    float: left;
    border-radius: 15px;
    margin: 10px;
}


.card-name {
    text-align: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 100%;
    top: 25px;
}

.card-image {
    text-align: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 65px;
    width: 150px;
    max-width: 150px;
}

.card-number {
    text-align: right;
    position: absolute;
    margin-left: auto;
    margin-right: 10px;
    left: 0;
    right: 0;
    width: 100%;
    /*left: 190px;*/
    top: 10px;
}

.card-suit {
    position: absolute;
    left: 10px;
    top: 10px;
}

.card-meaning {
    text-align: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 45px;
}

.card-meaning-reverse {
    text-align: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 100%;
    top: 275px;
    transform: rotate(180deg);
}