/* Map Page Styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; /* Ensure consistent font across the app */
}

#map {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#tellStoryBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: linear-gradient(135deg, #1e3c72, #2a5298); /* Blue gradient */
    color: white;
    padding: 10px 24px; /* Reduced padding for smaller button */
    border: none;
    border-radius: 25px; /* Rounded corners */
    cursor: pointer;
    font-size: 14px; /* Smaller, friendlier text */
    font-weight: 600; /* Use bold text for emphasis */
    font-family: 'Poppins', sans-serif; /* Apply the friendly font */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth hover transitions */
    letter-spacing: 0.5px; /* Slight letter spacing for readability */
}

#tellStoryBtn:hover {
    background: linear-gradient(135deg, #3b5998, #4c6ef5); /* Slightly brighter on hover */
    box-shadow: 0 6px 15px rgba(76, 110, 245, 0.5), 0 0 8px rgba(76, 110, 245, 0.8); /* Softer glow effect */
    transform: scale(1.05); /* Slightly larger on hover */
}

#tellStoryBtn:active {
    transform: scale(0.96); /* Shrink slightly on click */
    box-shadow: 0 4px 10px rgba(76, 110, 245, 0.4); /* Reduced shadow on click */
}

/* Responsive adjustments for mobile and smaller devices */
@media (max-width: 768px) {
    #tellStoryBtn {
        padding: 8px 16px; /* Slightly smaller padding for tablets */
        font-size: 12px; /* Reduce font size for smaller screens */
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 576px) {
    #tellStoryBtn {
        padding: 6px 12px; /* Even smaller padding for mobile devices */
        font-size: 10px; /* Further reduce font size for mobile */
        top: 5px;
        right: 5px;
    }
}