<style>
/* Background overlay */
.modal-overlay {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8); /* Darker for focus */
}

/* The modal window */
.modal-content {
    position: relative;
    background-color: #fff;
    margin: 5vh auto; /* 5% from top */
    width: 70%; /* Desktop width */
    height: 85vh; /* 85% of viewport height */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Responsive adjustment for Mobile */
@media screen and (max-width: 600px) {
    .modal-content {
        width: 95%; /* Use almost full width on mobile */
        margin: 2vh auto;
        height: 95vh;
    }
}

.close-btn {
    position: absolute;
    right: 20px; top: 15px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    z-index: 100;
}

iframe {
    width: 100%; height: 100%;
    border: none;
}
</style>
</style>