ps2-map.css

html {
    --ps2map__faction-ns-colour: rgba(63, 63, 63, 0.8);
    --ps2map__faction-vs-colour: rgba(183, 77, 213, 0.8);
    --ps2map__faction-nc-colour: rgba(60, 127, 255, 0.8);
    --ps2map__faction-tr-colour: rgba(226, 25, 25, 0.8);
    --ps2map__lattice-disabled: rgba(255, 255, 255, 0.15);
    --ps2map__lattice-contested: rgba(255, 160, 0, 1.0);
}

.ps2map__viewport {
    background-color: #051110;
    overflow: hidden;
}

.ps2map__layer {
    position: absolute;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 200ms ease-out;
}

#hexes {
    --ps2map__base-hexes__stroke-width: 4px;
}

#hexes>svg>polygon {
    fill: rgb(255, 255, 255);
    fill-opacity: 0.3;
    pointer-events: visiblePainted;
    stroke: #000000;
    stroke-width: var(--ps2map__base-hexes__stroke-width);
    /* Hover effects are applied in code as we need to reorder the SVG contents
       to promote the hovered element's outline, which has a habit of breaking
       the :hover pseudoclass. */
}

.ps2map__base-names__icon {
    --ps2map__base-color: #333333;
    --ps2map__base-icon-size: 1.5em;
    line-height: 0.95em;
    font-weight: 500;
    position: absolute;
    text-align: center;
    height: 2em;
    width: 8em;
    /* Slightly janky workaround for getting more pronounced text shadows. The
       performance hit is not so bad, but we'll need to keep an eye on this as
       more layers get implemented and start loading the renderer. */
    text-shadow:
        #333333 0.1em 0.1em 0.2em,
        #333333 -0.1em -0.1em 0.2em;
}

.ps2map__base-names__icon::before {
    background-color: var(--ps2map__base-color);
    position: absolute;
    border-radius: calc(var(--ps2map__base-icon-size) * 0.5);
    height: var(--ps2map__base-icon-size);
    width: var(--ps2map__base-icon-size);
    right: calc(50% - var(--ps2map__base-icon-size) * 0.5);
    top: calc(0em - var(--ps2map__base-icon-size));
}

.ps2map__base-names__icon__amp-station::before {
    content: url(./img/icons/amp-station.svg);
}

.ps2map__base-names__icon__bio-lab::before {
    content: url(./img/icons/bio-lab.svg);
}

.ps2map__base-names__icon__construction-outpost::before {
    content: url(./img/icons/construction-outpost.svg);
}

.ps2map__base-names__icon__containment-site::before {
    content: url(./img/icons/containment-site.svg);
}

.ps2map__base-names__icon__interlink::before {
    content: url(./img/icons/interlink.svg);
}

.ps2map__base-names__icon__large-outpost::before {
    --ps2map__base-icon-size: 1.2em;
    content: url(./img/icons/large-outpost.svg);
}

.ps2map__base-names__icon__small-outpost::before {
    --ps2map__base-icon-size: 1.08em;
    content: url(./img/icons/small-outpost.svg);
}

.ps2map__base-names__icon__tech-plant::before {
    content: url(./img/icons/tech-plant.svg);
}

.ps2map__base-names__icon__trident::before {
    content: url(./img/icons/trident.svg);
}

.ps2map__base-names__icon__warpgate::before {
    content: url(./img/icons/warpgate.svg);
}

.ps2map__terrain {
    background-size: 100%;
}

.ps2map__terrain__tile {
    background-size: 100%;
    position: absolute;
}

.ps2map__lattice>svg>line {
    stroke: #000000;
    stroke-width: 12px;
}