<style>
    html, body {
        height: 100%;
    }

    /* Basic styling for the whole page */
    body {
        margin: 0;
        background-color: whitesmoke; font-family: "Noto Sans", sans-serif; color: #3d3d3d; 
    }

    /* Make the map fill the entire browser window */
    #map {
        position: fixed; 
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
    }

    .custom .leaflet-popup-tip,
    .custom .leaflet-popup-content-wrapper {
        background: #000000;
        color: #ffffff;
    }

    /*Style the title panel (overlay box)*/
    #title {
        position: fixed;
        text-align: center;
        top: 10px;
        left: 15%;
        right: 15%;
        font-size: 2em;
        font-family: "Lora", serif;
        letter-spacing: .04em;
        margin: 0;
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid #777;
        border-radius: 6px;
        z-index: 800;
        max-width: calc(100vw - 20px)
    }

    /*Style the description panel (overlay box)*/
    #description {
        position: fixed;
        top: 75%;
        left: 45px;
        bottom: px;
        width: 85%;                 /* relative width (20% of viewport) */
        min-width: 200px;           /* don’t get too small */
        max-width: none;           /* don’t get too wide */
        padding: 20px;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid #777;
        border-radius: 6px;
        overflow-y: auto;
        z-index: 800;
    }

    #footer {
        bottom: 10px;
        left: calc(10px + 30%);   /* sidebar left + relative width */
        right: 10px;
        height: 50px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid #777;
        border-radius: 6px;
        z-index: 800;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .sidebar-img {
        width: 100%;           /* makes it fit the sidebar width */
        height: auto;          /* preserves aspect ratio */
        margin: 10px 0;        /* space above and below */
        border-radius: 6px;    /* match your sidebar rounded style */
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);  /* optional soft shadow */
    }

    #description h3 {
        font-size: 1em;          /* slightly smaller than main title */
        margin-top: 15px;
        margin-bottom: 1px;
        font-family: "Noto Sans", sans-serif;
        font-weight: 600;
    }
    /*Style links inside the description and hover effect)*/
    #description a {
        color: #005daa;
        text-decoration: none;
    }

    #description a:hover {
        text-decoration: underline;
    }

</style>
