/* Make the calendar container wider */
#events {
    width: 80%; /* Adjust this value to make it wider or narrower */
    max-width: 1200px; /* Limit maximum width */
    margin: 0 auto; /* Center the container */
    padding: 20px;
}

/* Make elements inside #events responsive */
#events h3 {
    font-size: 1.5rem; /* Adjust heading size */
}

/* Responsively adjust the description and duration containers */
#events p.duration, #events div.duration, 
#events p.description, #events div.description {
    font-size: 1rem;
    line-height: 1.5;
}

/* For mobile responsiveness, reduce padding and margins */
@media (max-width: 768px) {
    #events {
        width: 90%; /* Take up more width on smaller screens */
        padding: 15px;
    }

    #events h3 {
        font-size: 1.25rem; /* Make headings slightly smaller */
    }

    #events p.duration, #events div.duration, 
    #events p.description, #events div.description {
        font-size: 0.9rem; /* Adjust text size for mobile */
    }
    
    /* Adjust button size for mobile */
    #events input.reserve_time_btn, 
    #events input.select_another_btn {
        width: 100%; /* Make buttons full-width */
        padding: 10px;
    }

    /* Adjust the width of the form container */
    #eventForm {
        width: 100%;
    }
}

/* Larger screens, make sure container is not too wide */
@media (min-width: 1200px) {
    #events {
        width: 70%; /* Tighter container for large screens */
    }
}