#calendar{
    position: relative;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    z-index: 0;
}

#eventModal {
    display: none; /* Hidden by default */
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    background-color: rgba(22, 22, 22, 0.5);
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initial opacity for the fade-in effect */
    z-index: 1000; /* Ensure it's above other elements */
    transform: translate(-50%, -50%); /* Center the modal */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
}

#eventModal.show {
    display: flex; /* Make the modal visible */
    opacity: 1; /* Fully visible */
    transform: translate(-50%, -50%); /* Stay centered */
}

.modal-content {
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
}

/* Close button */
.close-modal {
    cursor: pointer;
    font-weight: bold;
}

.fc .fc-button {
    background-color: black;
    border-color: black;
    color: white; /* Text color */
}

.fc .fc-button:hover {
    background-color: #333; /* Darker shade on hover */
    border-color: #333;
}

/* Change the selected date background color */
.fc .fc-daygrid-day.fc-day-today {
    background-color: black;
    color: rgb(0, 0, 0); /* Text color for today’s date */
}

/* Change the background color of events */
.fc-event {
    background-color: rgb(255, 255, 255);
    border-color: black;
    color: rgb(0, 0, 0); /* Text color inside events */
}

/* Change the focus/active state of buttons */
.fc .fc-button.fc-button-active {
    background-color: #000; /* Active state */
    border-color: black;
}

/* Customize event titles */
.fc .fc-event-title {
    color: rgb(0, 0, 0); /* White text for events */
}