#homeContainer{
    display:flex;
    max-width:1250px;
    margin:30px auto;
    flex-direction: row;
}

#leftContainer{
    margin:30px 0 0 0;
    padding-right:20px;
    padding-left:5px;
    width:230px;
    order: 1;
}
#leftContainer p{
    font-size:14px;
    text-align:justify;
}
#leftContainer h4{color:red; margin:30px 0 0 0; font-size:18px}

#recentEvents{
    min-height:200px;
}

#latestPhotos{
    min-height: 200px;
}

#comingAttractions{
    min-height:200px;
    background-color:#FFF;
}

.summary{font-weight:bold; color:#333; margin-top:10px}
.summary:hover{cursor: pointer}
div.clickMe{color:blue}

#screen{display:none; width:2500px; height:3000px; top: 0; left:-100px; background-color:#000; opacity:0.5; padding:0; margin:0; position:fixed; z-index: 1}
#descriptionTarget{
    position:relative;
    margin:5% auto;
    max-width:700px;
    top:-50px;
    background-color: #FFFFFF;
    padding:30px 20px;
    border:4px solid #484;
    border-radius:20px;
    text-align:left
}
#descriptionTarget .dt1{
    overflow:auto;
    max-height:400px;
    margin:0;
    padding:0 20px 0 0
}
#outerDescription{
    top:0;
    display:none;
    position:fixed;
    width:100%;
    z-index:10;
    background-color: transparent;
}
#descriptionTarget img.closeButton{position:absolute; width:30px; top:15px; right:15px}
#descriptionTarget .dt2{text-align:center}
#descriptionClose{
    margin:20px auto;
    width:60px;
}
.middleBlog p{text-align:justify}
.middleBlog{padding: 30px 0}


.tt-item{height:150px; overflow-x:hidden; overflow-y: scroll}
.tt-item p{font-size: .85em}


/* Modal styling */
#eventModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    max-height: 80vh; /* Prevents modal from overflowing viewport */
    overflow-y: auto; /* Allows modal to scroll if needed */
}

/* Overlay for background blur effect */
#modalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.close-btn {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

/* Scrollable event list */
#eventList {
    max-height: 60vh; /* Ensures scrolling inside modal */
    overflow-y: auto;
    padding-right: 10px;
}

.event-item {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    #eventModal {
        width: 90%; /* Makes it take most of the screen width */
        max-width: none; /* Removes the max-width constraint */
        padding: 15px;
    }
}
/* end Modal */


@media only screen and (max-width: 900px) {
    #homeContainer{flex-direction: column; margin:0!important; padding:0!important}
    #webcamContainer h4{display:none}
    #webcamContainer{
        margin:0;
        width:calc(100%);
        order:1;
    }
    #webcamContainer #img1, #webcamContainer #img2{width:100%}
    #rightContainer{
        width:97%;
        margin:0 auto;
        order:3;
    }
    #leftContainer{
        width:90%;
        margin:0 auto;
        order:2;

    }
    #leftContainer p{font-size:16px!important}

}

@media only screen and (min-width: 901px){
    #webcamContainer{
        order:1;
        padding:20px 10px;
        width:80%;
    }
    #webcamContainer #img1, #webcamContainer #img2{width:100%; border:8px #059 solid; border-radius:20px}
    #rightContainer{
        margin:0 0 0 20px;
        width:20%;
        min-width:200px;
        order:2;
    }
}