:root {
    --background: 255, 6%, 5%;
    --foreground: 255, 6%, 98%;
}

body {
    font-family: "Inter", sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

#map {
    height: 500px;
}

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

.leaflet-container {
    background: transparent;
}

.leaflet-popup-content {
    font-size: 1rem;
    font-weight: 800;
}

.tns-icon-marker {
    border-radius: 999px;
}

.floating-icon {
    animation: float 3s ease-in-out infinite;
}

.floating-icon2 {
    animation: bounce 4s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(-1px, -2px);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(-2px, -1px);
    }
}