html, body {
    height: 100%;
    margin: 1rem;
    background: white;
}
.leaflet-container {
    height: 25rem;
    width: 40rem;
    max-width: 100%;
    max-height: 100%;
}

#map { width: 55rem; height: 43rem}

.info { padding: 6px 8px; 
    font: 14px/16px Arial, Helvetica, sans-serif; 
    background: white; 
    background: rgba(255,255,255,0.8); 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    border-radius: 5px; } 
    
.info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } 
.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

.button {
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    }

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #04AA6D;
    }

.button1:hover {
    background-color: #04AA6D;
    color: white;
    }

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    }

.button2:hover {
    background-color: #008CBA;
    color: white;
    }