body {
    margin: 0;
    padding: 0;
    background-color: black;
}
html,
body,
#map {
    height: 100%;
}
.marker {
    width: 10px;
    height: 10px;
    background-color: white;
    cursor: pointer;
    transition: transform 188ms ease-in-out;
    transform-origin: center;
    border-radius: 5px;
    border: 3px solid rgb(218, 218, 218);
}
.marker:hover {
    transform: scale(1.15);
}
.marker.Crime {
    background-color: rgb(255, 99, 0);
    border: 3px solid rgb(212, 106, 38);
}
.marker.Economic {
    background-color: rgb(65, 255, 113);
    border: 3px solid rgb(57, 185, 89);
}
.marker.Political {
    background-color: rgb(65, 170, 255);
    border: 3px solid rgb(56, 122, 177);
}

.marker.Tension {
    background-color: rgb(255, 65, 65);
    border: 3px solid rgb(173, 50, 50);
}

.marker.Celebrity {
    background-color: rgb(210, 214, 148);
    border: 3px solid rgb(172, 176, 118);
}

.marker.Storm {
    background-color: rgb(149, 150, 135);
    border: 3px solid rgb(111, 112, 100);
}

.marker.Space {
    background-color: rgb(145, 145, 145);
    border: 3px solid rgb(87, 87, 87);
}

.marker.Virus {
    background-color: rgb(170, 153, 207);
    border: 3px solid rgb(118, 102, 150);
}

.maplibregl-popup-content {
    padding: 10px 19px;
    border: 1px solid rgba(231, 231, 231, 0.719);
    border-radius: 10px;
    background: linear-gradient(238deg, #0e0e0eee, #212121d8);
    width: 215px;
    color: white;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.maplibregl-popup-tip {
    display: block;
}

.maplibregl-popup-close-button {
    color: white;
    margin: 15px;
}
.title {
    font-size: small;
}
.description {
    font-size: small;
}
.top-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.date,
.magnitude,
.confidence,
.source_count {
    margin: 0;
    font-size: x-small;
}
.holder {
    margin-top: 10px;
    background-color: transparent;
    border-radius: 7px;
    height: 100%;
}
.info {
    display: grid;
    grid-template-columns: repeat(2, auto);
    flex-direction: column;
    gap: 10px;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
}

.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.35) 100%
        );

    mix-blend-mode: overlay;
}

.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;

    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(0, 0, 0, 0.65) 100%
    );
}