@font-face {
    font-family: bombing;
    src: url(Bombing.ttf);
}
@font-face {
    font-family: kids;
    src: url(kids.ttf);
}

/* reset */
* {margin: 0; padding: 0; box-sizing: border-box;}

header {background:linear-gradient(rgba(46, 162, 229, 0.8), rgba(65, 173, 73, 0.8), rgba(235, 33, 40, 0.8)); position: sticky; top: 0;}
#events-body {background: linear-gradient(120deg, #fff4d2, #ffd6d6, #d5f3f1); background-repeat: no-repeat; background-position: center; background-size: cover;}
#events-header {font-family: bombing; letter-spacing: 0.1rem;}
/* #event-footer {position: absolute; bottom: 0; left: 0;} */

/* Event Detail Container */
.event-detail {font-family: 'Comic Sans MS', cursive, sans-serif; color: #333333; padding: 20px;  background: linear-gradient(135deg, #fdfbfb, #ebedee); border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}
.event-image {width: 100%; border-radius: 12px; margin-bottom: 15px; object-fit: cover; max-height: 400px;}
.event-content {font-size: 16px; line-height: 1.6;}
.event-section h5 {margin-top: 20px; margin-bottom: 10px; font-size: 18px; color: #555555;}
.event-cost, .event-date {font-size: 18px; color: #000;}
.event-times div {font-size: 16px; color: #555555; padding: 10px; background: #f1f8e9; border-radius: 8px; margin: 5px 0;}
/* Responsive Styling */
@media (max-width: 768px) {
    .event-times div {
        font-size: 14px;
    }
}