.sketchbookPage {
	--background: #170e1f;
	--lightbox-background: #001;
	--faded-overlay: #0016;
	
	background-image: url("/images/sketchbook/background.webp");
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
}

.sketchbookPage.heraldicArtPage {
	--background: #161f17;
	--lightbox-background: #010;
	--faded-overlay: #0106;

	background-image:
		linear-gradient(to right, #49462b 1px, transparent 1px),
		linear-gradient(to bottom, #49462b 1px, transparent 1px),
		url("/images/sketchbook/heraldry/background.webp");
	background-size: 80px 80px, 80px 80px, cover;
}

.icon.text.select {
	margin: 0 -2px 0 0;
	top: 0;
}

.sketchbookPage #panel nav {
	padding-left: 10px;
	left: -10px;
}

.sketchbookPage #panel .subsection,
.sketchbookPage #panel .menu,
.sketchbookPage #panel nav a,
.sketchbookPage .gallery article {
	box-shadow: 0 1px 5px 3px #0004, 0 1px 10px 6px #0003;
	position: relative;
}

.sketchbookPage .gallery article:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--faded-overlay);
	opacity: 0;
	transition: 0.15s ease-in opacity;
	will-change: contents;
}

.sketchbookPage.lightboxHovering .gallery article:after {
 	opacity: 1;
}

.sketchbookPage .gallery article[data-focused]:after {
	background-color: #0000;
}

.sketchbookPage.lightboxHovering .gallery article[data-focused]:after {
	--ant-width: 1px;
	--ant-length: 20px;
	
	animation: 1s infinite linear marching-ants;
	background-image: 
		linear-gradient(to right, #fff 50%, #000 50%), 
		linear-gradient(to right, #fff 50%, #000 50%), 
		linear-gradient(to bottom, #fff 50%, #000 50%), 
		linear-gradient(to bottom, #fff 50%, #000 50%);
	background-size: 
		var(--ant-length) var(--ant-width), 
		var(--ant-length) var(--ant-width),
		var(--ant-width) var(--ant-length), 
		var(--ant-width) var(--ant-length);
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

@media (pointer: coarse) and (max-width: 650px) {	
	.sketchbookPage:before {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background-image: inherit;
		background-size: inherit;
		background-position: inherit;
		content: "";
	}	
}

@media (min-resolution: 2x) {
	.sketchbookPage.lightboxHovering .gallery article[data-focused]:after {
		--ant-width: 0.5px;
	}
}

@keyframes marching-ants {
	0% { background-position: 0 0, 0 100%, 0 0, 100% 0; }
	100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; }
}