/* Styling the body for a neat layout */
body {
  background-color: #B3FFFF;
    font-family: Arial, sans-serif; /* Font for the text */
    text-align: center; /* Center-align content */
    margin-top: 50px; /* Add space from the top */
}

/* Styling for the container that holds the button */
.like-container {
    display: inline-block; /* Keeps the button centered and inline */
}

/* Base styling for the Like button */
.like-button {
    background-color: #e0e0e0; /* Neutral gray background */
    border: none; /* Removes default button border */
    border-radius: 50px; /* Rounded button shape */
    padding: 10px 20px; /* Adds spacing around the text */
    font-size: 18px; /* Text size */
    cursor: pointer; /* Pointer cursor on hover */
    display: flex; /* Allows icon and text alignment */
    align-items: center; /* Vertically center content */
    gap: 10px; /* Space between the icon and text */
    transition: background-color 0.3s ease; /* Smooth color change effect */
}

/* Styling for the heart icon inside the Like button */
.like-icon {
    font-size: 24px; /* Larger size for the icon */
    transition: transform 0.2s ease; /* Smooth bounce effect */
}

/* Styling when the Like button is clicked (active state) */
.like-button.liked {
    background-color: #ff5722; /* Vibrant orange background */
    color: white; /* White text and icon */
}

/* Bouncing animation for the heart icon in the liked state */
.like-button.liked .like-icon {
    transform: scale(1.5); /* Enlarges the icon slightly */
}

/* Resets the icon scale to normal */
.like-button .like-icon {
    transform: scale(1); /* Back to original size */
}

/* Optional hover effect for the button */
.like-button:hover {
    background-color: #cccccc; /* Slightly darker shade on hover */
}