body{
    background-color: green;
}

.card{
    background-color: white;
    border: medium solid black;
    border-radius: 0.5rem;
    box-sizing: border-box;
    height: 3.5in;
    width: 2.5in;
    font-family: sans-serif;
}

.card[data-rank=A] span.rank::before{
    content: "A";
}

.card[data-suit=clubs] span.suit::before{
    content: "\2663";
}

.card[data-suit=diamonds] span.suit::before{
    content: "\2666";
}
.card[data-suit=hearths] span.suit::before{
    content: "\2665";
}
.card[data-suit=spades] span.suit::before{
    content: "\2660";
}

.card:is([data-suit=diamonds],[data-suit=hearths]){
    color:red;
}

.card:is([data-suit=spades],[data-suit=clubs]){
    color:black;
}

.card :is(.topleft, .bottomright){
    display: inline-block;
    font-size: 200%;
    padding: 0.25rem;
    text-align: center;
}

.card .center{
    font-size: 400%;
}

.card .bottomright{
    transform: rotate(180deg);
}