@keyframes antsBorder {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }

    50% {
        transform: rotateX(15deg);
        opacity: 0.5;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.marching-ants {
    position: relative;
    box-sizing: border-box;
}

    /* Pseudo-element for the moving dotted border */
    .marching-ants::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        outline: 2px dashed black;
        outline-offset: 0;
        animation: antsBorder 1s linear infinite;
        pointer-events: none; /* Ensure clicks pass through */
        z-index: 1; /* Place above content but below icon */
    }

    /* Lighthouse icon on the left */
    .marching-ants::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -26px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-image: url('/img/lighthouseicon.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        backface-visibility: hidden;
        z-index: 2; /* Ensure icon is above border */
    }

.hover-button:hover {
    filter: brightness(0.9);
}


.leaflet-attribution-flag {
    display: none !important;
}