:root {
    font-size: 16px;
}
body {
    background-color: rgb(243, 238, 223);
    margin:1rem;
    font-family: sans-serif;
    font-size: 1rem;
}
h1 {
color: rgb(143, 111, 234);
margin-block: 0.5rem;

}
p {
color: red;
}
#map { 
    width: calc(100vw - 2rem);
    height: 75svh;
    margin-block: 1rem;
}

input{
    width:100%;
    display: block;
}
label {
    display: block;
} 

input[type="text"], input {
    font-size: 1rem;
}

.leaflet-popup-content {
    font-size: 1rem;
}

.leaflet-container {
    font-size: 16px;
    font-size: 1rem;
}

/* .form-field {
} */

.form-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    width: calc(100vw - 2rem);
    column-gap: 1rem;
}
/* .popup-content {
font-size: 25svh;
}*/

@media (min-width: 800px) {
}

img.huechange { filter: hue-rotate(120deg); }
img.huechange2 { filter: hue-rotate(280deg); }

.leaflet-control-locate {
background-image: url("crosshair2.svg");
}
.leaflet-control-geocoder-icon {
background-image: url("map.svg");
}

svg {
    overflow: visible;
}