body { margin: 0; padding: 0; font-family: Helvetica; overflow: hidden}
#map { position: absolute; top: 0; bottom: 0; width: 100%; z-index:5; overflow: hidden}

#heading {position: absolute; top: 0; left: 0; z-index:10; margin:10px; font-weight:900;}
#settings {position: absolute; top: 220px; left: 0; z-index:10; margin:10px; font-weight:900;}
#title { -webkit-text-stroke: 1.5px #f065c7; color:#ddd; font-size:60px; }
#author { color:#ddd; font-size:20px; }
#subtitle{ font-size:20px; color:#ddd; margin:5px -5px 0px 0px }
#descrip{ font-size:20px; color:#f065c7; margin:5px -5px 0px 0px; padding: 0px 10 0px 10px; max-width: 500px;}

p1{ color: #f6d55c; }
p2{ color:#225EA8; -webkit-text-stroke: 2px #f6d55c; font-size:35px; }

.form-select{ color:#f065c7; width: 300px; }

/* comment */
#move { position: absolute; padding:5px; background-color: white; border-radius: 3px; font-family: monospace; z-index:6;}
table.tableA { }
table.tableA td, table.tableA th{ border-bottom: 1px solid blue;}

.legend {
  padding: 10px; z-index:10; position: absolute; left: 500px; background: rgba(200, 200, 200, 0.8); margin: 10px;
  overflow: auto; border-radius: 3px; top: 0; width:95px;
}

.legend-title { margin-bottom: 5px;}

.legend-key { display: inline-block; border-radius: 20%; width: 20px; height: 20px; margin-right: 5px; z-index:10; }

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}