@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
        
 html, body {
     background-color: #baa299 !important;
 }
 
 .leaflet-interactive {
     fill: white !important;
     fill-opacity: 0;
     transition: 0.3s;
 }
 .leaflet-interactive:hover {
    fill: white !important;
    fill-opacity: 0.3;
}


 #map {
    background-image: url("/images/background.jpg") !important;
    background-color: #cccccc !important;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    
 }


 div.leaflet-popup-content-wrapper {
            background-color: beige;
            font-family: "MedievalSharp", cursive;
            font-weight: 400;
            font-style: normal; 
            font-size: 130%;
            border:5px solid black; 
            width: min-content !important;
            max-height: 300vh !important; 
            text-align: center;  
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
        }
        
img.precinctimg {
      height: 40vh;
  }      

div.leaflet-popup-content {
   width: min-content !important;
}
div.container.events {
    width: 500px;
    text-align: center;
}

a.leaflet-popup-close-button {
	visibility: hidden !important;
    }
    
    
    div.leaflet-popup-tip-container {
        visibility: hidden;
    }
    
        div.leaflet-control-layers-overlays {
        font-family: "MedievalSharp", cursive;
        font-weight: 400;
        font-style: normal; 
        font-size: 130%;
    }