style.css

:root {
  --visina-slajdera: 82px;
}

html, body, #mapa {
  height: 100%;
  margin: 0px;
  padding: 0px
}

body {
  filter: sepia(31%);
}


img {
  max-width: 100%;
}

h1 {
  bottom: 0;
  color: #822323;
  line-height: 80%;
  margin-bottom: var(--visina-slajdera);
  opacity: 0.33;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

#mapa {
  z-index: 0;
}

.leaflet-control-container {
  top: 50px;
  position: absolute;
}
.leaflet-marker-icon {
  filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.5));
}

.podnaslov {
  font-size: 24px;
  display: block;
}

.ikonica {
  cursor: pointer;
  opacity: 0.75;
  position: absolute;
  width: 32px;
  z-index: 1;
}

.leaflet-popup {
  width: 80vw;
}

.leaflet-popup-close-button {
  font-size: 2em !important;
  padding: 8px !important;
}

@media (min-width: 400px) {
  h1 {
    font-size: 52px;
  }
  .leaflet-popup {
    width: 280px;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: 74px;
    margin-bottom: calc(var(--visina-slajdera) - 4px);
  }
  .podnaslov {
    display: inline;
  }
}