.card {
    font-family: 'Kalam', cursive;
    transform: rotateZ(-2deg);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0px;
    width: clamp(600px, 50%, 900px);
    height: clamp(300px, 25%, 450px);
    align-self: center;
}
.card th {
    border-bottom: 2px solid rgb(230, 115, 115);
}
.card td {
  padding-left: 8px;
    border-bottom: 2px solid rgb(128, 170, 197);
}
.card tr:last-child td {
    border-bottom: none;
}
.card a {
  text-decoration: none !important;
}

.card:hover {
    animation: shufflecard 0.5s ease-in-out;
    z-index: 200;
}

@keyframes shufflecard {
  0%   { transform: rotate(-2deg); }
  50%  { transform: rotate(-6deg); }
  100% { transform: rotate(-2deg); }
}