54 lines
922 B
CSS
54 lines
922 B
CSS
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);
|
|
} |