html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 ; font-family:sans-serif;}
  #container { width: 100%; height: 100% }
  #nav { z-index: 100; opacity:.9 ; position: absolute; margin: 10px 0 0 10px; background-color: #fff; padding: 10px; font-size:18px;visibility:visible;}
  #panel {z-index:110; opacity:.9 ; position: absolute; margin: 10px 0 0 10px; background-color: #fff; padding: 10px; max-width:40%;visibility:hidden;}
 
  h2 {margin:8px 0 0 0 ;font-size:20px;font-weight:normal;color:darkred;}
  p {margin:2px 0;font-size:14px;line-height:18px;}
  
  
  
  #map {
  height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}



nav, #panel {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  #nav, #panel {
    width: 500px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}


@media (max-width: 600px) {
  #map {
    height: 80vh;
  }
}