@import url("https://fonts.spikerko.org/lyrics/source.css");

* {
    font-family: "LyricsRegular";
}

.map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-container #map {
    position: absolute;
    width: 100%;
    height: 100%;
}

.leaflet-tile-container img {
    width: 50%;
    image-rendering: pixelated;
}
.map-container #map mappopup {
    margin: 0;
    padding: 0;
}

.map-container .map-type-switcher {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 9999;
}

.disclaimer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9999;
    padding: 5px;
    background-color: white;
    border-top-right-radius: 10px;
}

.disclaimer .content {
    position: relative;
    left: 1px;
    bottom: 1px;
    z-index: 9999;
}

.map-container .map-type-switcher #mtsel,
.leaflet-popup-content #mtsel {
    outline: none;
    border: 1px rgb(131, 131, 131) solid;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    padding: 10px;
    transition: 120ms all ease-in-out;
}

.map-container .map-type-switcher #mtsel:active,
.map-container .map-type-switcher #mtsel:hover,
.leaflet-popup-content #mtsel:active,
.leaflet-popup-content #mtsel:hover {
    background-color: rgb(182, 182, 182);
}


loader {
    position: relative;
    z-index: 999999;
    display: none;
}

loader .classic-spin {
    width: 50px;
    aspect-ratio: 1;
    display:grid;
    -webkit-mask: conic-gradient(from 15deg,#0000,#000);
    animation: l26 1s infinite steps(12);
  }
  loader .classic-spin,
  loader .classic-spin:before,
  loader .classic-spin:after{
    background:
      radial-gradient(closest-side at 50% 12.5%,
       #1b1b1b 96%,#0000) 50% 0/20% 80% repeat-y,
      radial-gradient(closest-side at 12.5% 50%,
       #1b1b1b 96%,#0000) 0 50%/80% 20% repeat-x;
  }
  loader .classic-spin:before,
  loader .classic-spin:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg);
  }
  loader .classic-spin:after {
    transform: rotate(60deg);
  }
  
  @keyframes l26 {
    100% {transform:rotate(1turn)}
  }