:root {
    /* Card Styling: background, border, and corner radius */
    --card-bg: rgba(117, 117, 117, 0.75);  /* Semi-transparent gray */
    --card-border: 2px solid black;       /* Solid black border */
    --card-radius: 1.15rem;              /* Rounded corners */
}
/* Card components */
.card {
    box-sizing: border-box;  /* Include padding/border in width/height */
    width: 30%;
    height: 100px;
    background-color: var(--card-bg) !important; /* Important specifier or else bg is transparent, don't know why */
    border: var(--card-border);
    border-radius: var(--card-radius);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.42s;
    /*user-select: none;*/ /* Prevents text selection */
    font-weight: bolder;
    color: black;
    margin: 7px;
}
.card:hover {
    border: 2px solid lightgray;
    transform: scale(1.05); /* Growth */
    margin: 15px;          /* Adjust margin to compensate */

    box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
}
.card:active {
    transform: scale(0.95); /* Shrink */
    margin: 5px;           /* Adjust margin to compensate */
}