html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

calcite-panel {
  height: 60vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#map {
  flex: 1;
}

#info-button {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
}

#legend-button {
  position: absolute;
  bottom: 70px;
  left: 20px;
  z-index: 10;
}

p {
  text-align: justify;
  padding: 10px;
}

.p-info {
  text-align: justify;
  font-size: x-small;
}

h3 {
  padding: 10px;
}

h4 {
  padding: 10px;
}

.custom-header {
  background-color: #452C63;
}

.custom-footer {
  background-color: #452C63;
}