body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: 0; /* Removed margin to remove unnecessary space */
    padding: 5px; /* Added padding to provide some spacing around the content */
    background-color: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%; /* Full width of the viewport or parent container */
    max-width: 600px; /* Optional: restrict the max width to 600px */
    height: auto;
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    justify-content: center; /* Align the card number closer */
}

#card {
    width: 100%; /* Card takes up the full width of the container */
    max-width: 100%; /* Ensure the card doesn't exceed the container width */
    aspect-ratio: 1; /* Maintain square aspect ratio */
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    margin: 0; /* No margin to avoid gaps around the card */
}

#card.flipped {
    transform: rotateY(180deg);
}

#front,
#back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden; /* Prevent images from overflowing */
}

#front img,
#back img {
    width: 100%; /* Image takes full width */
    height: 100%; /* Height adjusts proportionally */
    object-fit: contain; /* Ensures image fits within the card */
    object-position: center; /* Align to center */
    margin: 0; /* Removed margin for better fitting */
}

#front {
    background-color: white;
}

#back {
    background-color: white;
    transform: rotateY(180deg);
}

#card-number {
    margin-top: 5px;
    font-size: 1.2em;
}

.button-container { /* Container for all buttons */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons horizontally */
    gap: 30px; /* Space between button groups */
    margin-top: 15px; /* Space from card */
}

.button-group { /* Group similar buttons */
    display: flex;
    justify-content: center;
    gap: 30px;
}

#prev-card-button,
#flip-card-button,
#next-card-button,
#favoriteButton,
#reviewFavorites,
#allCardsButton {
    font-size: 20px;
    padding: 10px 15px;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.2s;
}

#prev-card-button {
    background-color: violet;
}

#flip-card-button {
    background-color: purple;
}

#next-card-button {
    background-color: orange;
}

#allCardsButton {
    background-color: #28a745;
}

#reviewFavorites {
    background-color: #008CBA;
}

/* Styles for the favorite button (STAR) */
#favoriteButton {
    border: none;
    background: none;
    font-size: 43px;
    cursor: pointer;
    padding: 0;
    color: gold; /* Gold color for the empty star */
    transition: color 0.3s ease;
}

#favoriteButton.favorited {
    color: red; /* Red color for the filled star */
}

#prev-card-button:hover,
#flip-card-button:hover,
#next-card-button:hover,
#allCardsButton:hover,
#reviewFavorites:hover {
    background-color: rgb(143, 41, 226);
    transform: scale(1.05);
}