:root {
	--page-width: 1920px;
	--page-height: 1800px;
}

body, html {
	width: 100%; height: 100%;
	margin: 0;
}

.passthrough { pointer-events: none; }

a.home {
	position: absolute;
	z-index: 1000;
	color: #21120c;
	left: 16px; top: 16px;
	@media screen and (width < 600px) { left: 10px; top: 10px; transform: scale(.75); }
}
a.home:hover img, a.home:active img, a.home:focus-visible img {
	transform: scale(1.1);
	@media screen and (width < 600px) { transform: scale(1.333); }
	filter: drop-shadow(0px 0px 10px #fff8df);
}
a.home .popout {
	z-index: -1;
	position: absolute;
	left: 90%; top: 55%; transform: translateY(-50%);
	overflow: hidden;
	width: 0%;
	transition: width .8s;
	font-family: 'Victorian Parlor', serif;
	font-size: 2rem;
	span {
		padding: .1em .4em .1em .65em;
		webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
		background: #dec59e;
	}
}
a.home:hover .popout, a.home:active .popout, a.home:focus-visible .popout { width: 100%; }

button:focus-visible { outline: none; }
button:focus-visible img { filter: drop-shadow(0px 0px 20px #fff8df); }

main {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
	
	@media screen and (width < 600px) {
		width: 118%; left: -9%;
		height: 118%; top: -9%;
		transform: scale(.85);
	}
}

.corner {
	position: absolute;
	z-index: 999;
}
#top-left-marker { top: 0px; left: 0px; }
#top-right-marker { top: 0px; left: var(--page-width); rotate: 90deg }
#bottom-right-marker { top: var(--page-height); left: var(--page-width); rotate: 180deg }
#bottom-left-marker { top: var(--page-height); left: 0px; rotate: -90deg }

#shadow-box {
	position: relative;
	left: 1050px; top: 760px;
	.img-magnifier-glass {
		position: absolute;
		z-index: 1;
		cursor: none;
		border-radius: 50%;
		cursor: none;
		/*Set the size of the magnifier glass:*/
		width: 200px;
		aspect-ratio: 1;
		left: -50px;
		top: 453px;
		img {
			cursor: initial;
			rotate: 35deg;
      width: 104%;
      left: -33%;
      top: -12%;
      filter: drop-shadow(5px 7px 4px #21120c99);
			pointer-events: none;
		}
	}
}
.img-magnifier-container {
	position: relative;
}

/* sepia color overlay */
main:after {
	content: '';
	z-index: 2000;
	position: absolute;
	width: 100%; height: 100%;
	background: #704c2e;
	opacity: 0.35;
	mix-blend-mode: color;
	pointer-events: none;
}

/* section behind the window that gets dragged */
#drag-wrapper {
	position: absolute;
	top: 0px; left: 0px;
	width: 2000%;
	height: 2000%;
}

main img, nav a, nav button {
	position: absolute;
	filter: drop-shadow(4px 4px 3px #21120c77);
	user-select: none;
}

.background-layer {
	mix-blend-mode: multiply;
	opacity: 0.5;
}

button:has(> .hover-hide) { position: absolute; }
.hover-hide { filter: none; }
button:active .hover-hide, button:focus-visible .hover-hide, button:focus .hover-hide, .hover-hide:hover {
	opacity: 0;
}