style.css

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
}

#map {
  width: 100%;
  height: 100%;
}

#search {
  top: 10px;
  left: 10px;
  position: fixed;
  z-index: 1;
  background-color: rgba(92, 92, 92, 0.8);
  /* padding-right: 8px; */
}

#search-input {
  border: none;
  background-color: rgba(92, 92, 92, 0);
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
  color: white;
}

#count {
  color: white;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

#suffix {
  z-index: 10;
  /* height: 70%; */
  min-width: 100px;
  /* width: 20px; */
  background-color: rgba(0, 0, 0, 0.7);
  /* background-color: white; */
  top: 10px;
  right: 10px;
  position: fixed;
  padding: 10px;
  color: azure;
}

#suffix > label {
  padding-bottom: 5px;
}

#github {
  position: fixed;
  bottom: 40px;
  right: 4.5px;
  background-color: rgba(201, 201, 201, 0.6);
  border-radius: 50%;
  padding: 5px;
  height: 25px;
}

#github:hover {
  cursor: pointer;
}

#github > a > img {
  width: 25px;
  height: 25px;
}

label {
  display: block !important;
  margin-bottom: 0px !important;
}

.mapboxgl-popup {
  max-width: 400px;
  font-family: 'Courier New', Courier, monospace;
}

.mapboxgl-ctrl-group {
  background: rgb(112, 112, 112);
  border-radius: 0px;
}

.mapboxgl-ctrl-group button {
  width: 35px;
  height: 35px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}