/* Style for the buttons container */
.buttons {
    text-align: center;
    margin: 20px 0;
}

/* General button styling */
.buttons button {
    background-color: #4CAF50; /* Green background */
    color: white;             /* White text */
    padding: 10px 20px;       /* Top/bottom and left/right padding */
    margin: 0 10px;           /* Margin between buttons */
    border: none;             /* No border */
    border-radius: 5px;       /* Rounded corners */
    cursor: pointer;          /* Pointer cursor on hover */
    transition: 0.3s;         /* Smooth transition for hover effect */
    font-size: 16px;          /* Font size */
}

/* Hover effect for buttons */
.buttons button:hover {
    background-color: #45a049; /* Slightly darker green */
}

/* Active/focused button styling */
.buttons button:focus, .buttons button:active {
    outline: none;           /* Removes the default focus outline */
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.2); /* Adds a subtle shadow */
}