body {
    margin: 0;
    padding: 0;
    background-color: #b7a48b;
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-size: 100%;
    font-style: normal;
}

.leaflet-container {
    font-family: "Fira Sans", sans-serif;
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-weight: 300;
    font-style: normal;
}

h1 {
    font-weight: 700;
    font-size: calc(1.5rem + ((100vw – 400) / 400));
    color: "#ffffff";
    letter-spacing: 0.02em;
    margin: 5px 0;
    font-style: normal;
}

h2 {
    font-weight: 300;
    font-size: 2.3em;
    letter-spacing: 0.04em;
    margin: 5px 0;
    font-style: normal;
}

h3 {
    font-family: "Fira Sans";
    font-size: 2.3em;
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 5px 0;
    font-style: normal;
}

#content {
    width: 100%;
    max-height: 100vh;
    margin:0;
    padding: 10px;
    /* height: 40vh; */
    /* height: 300px;
    overflow: scroll; */
}

#map {
    width: 100%;
    height: 100vh;
    padding:0;
    margin:0;
    /* height: 60vh; */
}

#mobile {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333;
    z-index: 5000;
    opacity: 0.9;
}

.caption {
    margin: 0 0 20px 0;
    display: block;
}

p {
    font-size: 1.1em;
    line-height: 1.5em;
}

/* Change opacity on hover over the icon class */
.icon:hover {
    opacity: .8;
}

/* Modify Leaflet's default popup style */
.leaflet-popup-content h3 {
    font-family: "Fira Sans", serif;
    font-size: 1.3em;
    margin-bottom: 6px;
}

.leaflet-popup-content p {
    margin: 3px 0 6px;
    font-size: 1.1em;
}

.leaflet-popup-content a {
    font-weight: normal;
}

.leaflet-popup-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto; /* Optional: adds spacing and centers the image */
    border-radius: 4px; /* Optional: matches the popup's rounded corners */
}

/* Optional: Set a fixed width for all popups for consistency */
.leaflet-popup-content-wrapper {
    width: 300px; 
}

@media screen and (max-width: 900px) {

    .first-column,
    .second-column {
        width: 100%;
    }
}