/* Set overall body style for background and text color */
body {
    background-color: lightblue;
    color: lightcoral; /* Closest web-safe color to light red */
    font-family: sans-serif; /* A default font */
}

h1 {
    color: indianred; /* Slightly darker red for the heading */
}

#map {
    height: 500px;
    width: 100%;
    /* background-color: #eee;   No needed as the background takes over entire screen */
    border: 2px solid darkcyan;  /* optional, but looks nice */
}

.leaflet-popup-content {
    color: darkred; /* Adjust popup text color */
}

.custom-marker-icon {
    background-color: red; /* Or any color you want */
    width: 20px;
    height: 20px;
    display: block;
    left: -10px;
    top: -10px;
    position: relative;
    border-radius: 20px; /* Make it a circle */
    border: 1px solid #fff;
}