.artPage {
	--panel: #eee;
	--panel-text: var(--text);
}

.artPage.mapPage {
	--max-width: 900px;
	--main-margin: auto; 
}

.artPage.mapPage main {
	width: 100%;
}

.artPage .gallery article {
	transition: 0.3s opacity, 0.3s background;
}

.artPage.lightboxHovering  .gallery article:not([data-focused]) {
	background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=");
	background-size: 7px;
	filter: contrast(2000) saturate(0.4);
	image-rendering: crisp-edges;
	z-index: 23;
	opacity: 0.2;
}

.artPage.lightboxHovering .gallery article:not([data-focused]) img {
	mix-blend-mode: soft-light;
	isolation: isolate;
}

.artPage #lightbox.long { 
	padding: 20vh 0 0;
}

.artPage #lightbox.long .content {
	overflow: scroll;
	position: relative;
	left: 0;
	max-width: 100%;
	max-height: fit-content;
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.artPage #lightbox.long #displayImage {
	width: auto;
	height: 150px;
	padding: 0 20px 0;
}

.artPage #lightbox.long .lightboxData {
	position: absolute;
	padding: var(--lightbox-margin);
}

@media (prefers-color-scheme: dark) {
	.artPage.light {
		--panel: #222;
	}
	
	.artPage.mapPage main {
		filter: invert();
	}
	
	.artPage.lightboxHovering  .gallery article:not([data-focused]) {
		filter: contrast(10) saturate(0.4);
		opacity: 0.4;

	}
}

@media screen and (max-width: 850px) {
	.map { 
		padding: 10px 10px 5px; 
	}
}

@media screen and (max-width: 650px) {
	.mapPage main { 
		margin: 0;
		overflow: hidden;
		width: 100vw; 
	}
	
	.artPage .map { margin: 10px -9vw 0; }
	
	.artPage:not(.mapPage) footer {
		margin-left: var(--root-margin);
		text-align: left;
		width: auto;
	}
	
	.artPage #lightbox.long { 
		padding: var(--lightbox-margin) 0 0;
	}
}