:root {
    --clary-fog-1: #aeb99f;
    --clary-fog-2: #95aa89;
    --clary-fog-3: #c4c4aa;
}

html,
body,
#map,
#map .ol-viewport,
#map .ol-layers {
    background:
        radial-gradient(circle at 18% 22%, rgba(91, 127, 72, 0.32), transparent 18rem),
        radial-gradient(circle at 82% 18%, rgba(78, 116, 151, 0.18), transparent 20rem),
        radial-gradient(circle at 56% 78%, rgba(184, 165, 104, 0.20), transparent 22rem),
        linear-gradient(135deg, var(--clary-fog-2), var(--clary-fog-1) 45%, var(--clary-fog-3));
    background-attachment: fixed;
}

#map {
    position: relative;
}

#map::after {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%);
    background-size: 18px 18px;
    content: "";
    inset: 0;
    opacity: 0.55;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.ol-overlaycontainer,
.ol-overlaycontainer-stopevent {
    z-index: 3;
}

.ol-layer canvas {
    image-rendering: pixelated;
}

.clary-preview-layer canvas {
    filter: grayscale(1) brightness(0.82) contrast(0.9);
}