.cel-announcement-bar {
    background: #fefefe; /* Light gray background */
    color: #721c24; /* Dark red text */
    padding: 10px;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    font-family: Arial, sans-serif; /* Optional: Ensure consistent font */
}

.cel-announcement-bar p {
    margin: 0; /* Remove default margin for the "No upcoming events" message */
    color: #721c24; /* Ensure the "No upcoming events" text is dark red */
}

.cel-announcement-bar-button {
    color: #721c24; /* Dark red for the link to match the text */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Optional: Make the link stand out */
}

.cel-announcement-bar-button:hover {
    color: #a52a2a; /* Slightly lighter red on hover for contrast */
    text-decoration: underline; /* Optional: Add underline on hover */
}

body {
    padding-top: 40px; /* Adjust this value based on the actual height of the announcement bar */
}