html {
        min-height: 100vh; /* Added here and not body */
}

body {

    background-image: linear-gradient(lightblue, steelblue);
    text-align: center;
    }

h1 {
    text-shadow: 2px 2px 2px gray;
    font-size: 60px;
}

#playing-cards { /* container for holding all the cards */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 100%;
    /* border: 1px dotted gray; */
    gap: 20px;
    justify-content: center; /* Kept this one, removed the overridden space-between */

}


.card {
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 2px 2px 2px gray;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 5 / 7;
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.red {
    color: red;
}



.left {
    align-self: flex-start;

}

.middle {
    align-self: center;
    display: flex; /* Make .middle a flex container  so I can then use column below */
    flex-direction: column; /* Stack its children (suit symbols) vertically */
    font-size: 80px;
    align-items: center;
    justify-content: space-around;
}



.right {
    align-self: flex-end;
}

.flipped {
    transform: rotate(180deg);
}

.card:focus {
    outline: 3px solid orangered;
    outline-offset: 2px;
    box-shadow: 0 0 10px dodgerblue; /* Optional: enhance focus visibility */
}