:root {
	--page-width: 2320px;
	--page-height: 2100px;
	--top-extra: 100px;
	--left-extra: 400px;
}

body {
	background: #593824;
}
body:before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1000;
	width: 100%;
	height: 100%;
	background-image: url('images/tapestry_forest.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: fixed;
	opacity: .85;
}

#drag-wrapper {
	top: calc(-1 * var(--top-extra));
	left: calc(-1 * var(--left-extra));
	width: calc(var(--page-width) + var(--left-extra));
	height: calc(var(--page-height) + var(--top-extra) + 112px);
}
.repositioner {
	top: var(--top-extra);
	left: var(--left-extra);
}

.page-settings {
	--open-button-fill: none;
	--open-button-background: none;
	--open-button-border: none;
	--background: var(--paper-color);
	--border: none;
	--outline: 0px;
	--color: var(--text);
	--accent: var(--text);
}
#page-settings-button { padding: 0; margin: 0; }
#page-settings-button .paper-popout {
	line-height: initial;
	right: calc(100% - 22px);
	clip-path: polygon(0% 0%, 100% 0%, 93% 35%, 93% 65%, 100% 100%, 0% 100%);
	span { padding-right: calc(.5em + 22px); }
}
#page-settings-contents {
	border-radius: 0;
	filter: var(--shadow);
	padding-top: 1.5em;
	label { font-weight: bold; }
	button { color: var(--link-text); }
	button:hover { color: var(--link-hover); }
}

#intro {
	position: absolute;
	z-index: 900;
	left: 365px; top: 165px;
	display: block;
	font-family: "Victorian Parlor", serif;
	font-size: 45px;
	color: #47341a;
	background: #fff8df;
	p {
		opacity: 0.85;
		position: absolute;
		width: 8em;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%);
	}
}

.stamp {
	filter: drop-shadow(1px 1px 2px #21120c77);
}

/* color adjustment layers */
.effect-layers.el-1 { background: #806050; mix-blend-mode: color; opacity: .22; }
.effect-layers.el-2 { background: #633b35; mix-blend-mode: color-burn; opacity: .05; }
.effect-layers.el-3 { background: #5d4a49; mix-blend-mode: overlay; opacity: .1; }
/* color "palette" alternates */
.color-sepia {
	.effect-layers.el-1 { background: #704c2e; mix-blend-mode: color; opacity: .45; }
	.effect-layers.el-2, .effect-layers.el-3 { opacity: 0; }
}
.color-gray {
	.effect-layers.el-1 { background: #000; mix-blend-mode: saturation; opacity: 1; }
	.effect-layers.el-2 { mix-blend-mode: color-dodge; opacity: 0.1; }
	.effect-layers.el-3 { background: #999; mix-blend-mode: overlay; opacity: 1; }
}
.color-neon {
	.effect-layers.el-1 { background: #ffcaab; mix-blend-mode: soft-light; opacity: 0.25; }
	.effect-layers.el-3 { background: #21233d; mix-blend-mode: color-dodge; opacity: .25; }
	.effect-layers.el-2 { background: #f00; mix-blend-mode: saturation; opacity: .5; }
}
/* color palette menu */
#palettes { pointer-events: none; }
#palettes button, #palettes .bg { pointer-events: initial; }
#palettes * { overflow: visible; }
#palettes .wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: min(900px,100vw);
	height: 100vh;
}
#palettes .paint-palette .bg {
	clip-path: polygon(26% 0%, 70% 0%, 100% 22%, 100% 62%, 63% 100%, 20% 100%, 0% 90%, 0% 71%, 25% 67%, 0% 51%, 0% 25%);
}
#palettes .paint-palette, #palettes .preview {
	position: relative;
	width: min(80vw,max(300px,49%));
	max-width: fit-content;
}
#palettes .paint-palette { rotate: 8deg; }
/* overlap palette and preview on wide screens */
@media screen and (width >= 600px) {
	#palettes .paint-palette { right: -6%; top: -5%; }
	#palettes .preview { left: -6%; bottom: -5%; z-index: -1; }
}
#palettes .bg {
	position: relative;
	max-width: 100%; max-height: 75vh;
	filter: var(--shadow);
}
#palettes .preview .effect-layers {
	width: 54%;
  height: 58%;
  top: 20%;
  left: 23%;
}
#palettes .options {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	padding: 12% 8% 43% 25%;
	font-size: max(1.5rem,min(5vh,min(4vw,40px)));
	font-family: 'Paint Hand', sans-serif;
	line-height: 1.5em;
}
#palettes .paint-palette button {
	text-align: center;
	color: var(--paper-color);
	background-size: 100% 100%;
	text-transform: lowercase;
}
#palettes .paint-palette button.palette-option:hover, #palettes .close:hover { scale: 1.1; color: #fff; }
#palettes .paint-palette button.palette-option {
	display: block;
	position: relative;
	margin-bottom: .1em;
	padding: .2em 1em;
}
#palettes .paint-palette button.palette-option:nth-child(1) { right: -5%; background-image: url('images/paint_1.png'); }
#palettes .paint-palette button.palette-option:nth-child(2) { right: -27%; background-image: url('images/paint_2.png'); }
#palettes .paint-palette button.palette-option:nth-child(3) { right: -33%; background-image: url('images/paint_3.png'); }
#palettes .paint-palette button.palette-option:nth-child(4) { right: -31%; background-image: url('images/paint_4.png'); }
#palettes .paint-palette button.palette-option:nth-child(5) { right: -22%; background-image: url('images/paint_5.png'); color: var(--text); }
#palettes .close {
	position: absolute; bottom: 4%;
	background-image: url('images/paint_6.png');
	padding: .2em .5em;
}
/* button to open palette popup */
#palette-button { z-index: 950; }
#palette-button .paper-popout { left: 69%; top: 59%; }

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

/* window background image */
.wrapper:has(> .window) { position: absolute; }
.window {
	position: relative;
	pointer-events: none;
	width: fit-content;
}
.window > img {
	position: absolute;
	top: 0; left: 0;
}
.window > img:first-of-type {
	position: relative;
}
.window .window-scene {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: url('images/clouds_tile.png'), url('/graphix/bg/stars_gold_green.png');
	background-size: auto, 275px;
	background-attachment: fixed;
	pointer-events: initial;
}
.window.window-90 .window-scene { width: 90%; height: 90%; top: 5%; left: 5%; }
.window.window-80 .window-scene { width: 80%; height: 80%; top: 10%; left: 10%; }
.window.window-70 .window-scene { width: 70%; height: 70%; top: 15%; left: 15%; }
.window.window-60 .window-scene { width: 60%; height: 60%; top: 20%; left: 20%; }
.window.window-50 .window-scene { width: 50%; height: 50%; top: 25%; left: 25%; }
.window.window-40 .window-scene { width: 40%; height: 40%; top: 30%; left: 30%; }
.window.window-30 .window-scene { width: 30%; height: 30%; top: 35%; left: 35%; }
.window.window-20 .window-scene { width: 20%; height: 20%; top: 40%; left: 40%; }
.window.window-round .window-scene { border-radius: 50%; }

#medieval-frame-rotate { transition: transform 1s; }

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

.pot {
	position: absolute;
	width: fit-content;
	pointer-events: none;
	.front { pointer-events: initial; border-radius: 46%; width: 80%; left: 12%; }
	.front img { pointer-events: none; left: -15%; }
	.front, .front img { position: relative; }
	.contents {
		position: absolute;
		width: 62%;
		left: 21%;
		bottom: 55%;
		overflow: hidden;
		img { left: 50%; transform: translateX(-50%); }
	}
}
.pot .content-wrapper {
	width: 100%;
	transform: translateY(100%);
	bottom: -1%;
	transition: transform 1s;
	img { position: relative; }
}
.pot:has(.front:hover, .front:focus-visible, .front:active, .content-wrapper:hover) .content-wrapper { transform: translateY(0%); }

.dice-box {
	position: absolute;
	width: fit-content;
	z-index: 1;
	.outer { position: relative; }
	.inner { transition: transform 1.15s; }
	img { filter: drop-shadow(-8px 8px 4px #21120c77); }
}
.dice-box:hover .inner, .dice-box:active .inner, .dice-box:focus-visible .inner { transform: translateX(-90%); }

.book { z-index: 1; }

.spoons { position: absolute; z-index: 2; }
.spoons * {
	top: 0;
	left: 0;
	&:first-child { left: -9px; }
	&:not(:first-child) { position: absolute; }
	&:nth-child(3) { left: 3px; }
	transition: transform .5s;
}
.spoons:hover, .spoons:active, .spoons:focus-visible {
	:nth-child(2) { transform: translate(65px, 76px); }
	:nth-child(3) { transform: translate(-55px, 107px); }
}

/* FOLLOWING EYE */
.eye-wrapper { position: absolute; width: fit-content; }
.eye-wrapper .top { position: relative; }
.eye-wrapper img:not(.bottom) { filter: none; }

/* GOLD SHIP PENDANT */
#ship {
	clip-path: polygon(58% 0%, 90% 62%, 100% 69%, 100% 81%, 81% 100%, 41% 100%, 9% 72%, 0% 58%, 46% 21%, 53% 0%);
	position: absolute;
	img { position: relative; }
	-webkit-transform-origin: 55% 1%; transform-origin: 55% 1%;
	transition: transform .15s;
}
#ship:hover, #ship:active, #ship:focus-visible { animation: ship .8s ease-in-out; }
@keyframes ship {
	0% { transform: rotate(0deg); }
	18% { transform: rotate(-3.5deg); }
	50% { transform: rotate(2deg); }
	75% { transform: rotate(-1deg); }
	100% { transform: rotate(0deg); }
}

/* FOOL TAROT CARD */
#tarot-fool { transition: transform .75s; }
#tarot-fool:hover { transform: translateY(-45%); }
#tarot-fool .paper-popout { top: 55%; }

/* LINK IMAGES */
#snailfish:hover img, #cut-worms:hover img { scale: 1.05; }
#cut-worms .paper-popout { top: 43%; }
#cut-worms .paper-popout span { padding-top: 0; padding-bottom: 0; }

/* JACK IN THE BOX CHARM */
#jack-box .paper-popout { top: 60%; margin-left: -15%; }

/* LAMP */
.light {
	position: absolute;
	border-radius: 50%;
	background: #ffd8a7;
	width: 120%;
	transform: translate(-8.3%,-8.3%);
	aspect-ratio: 1;
	mix-blend-mode: hard-light;
	filter: blur(100px);
	opacity: .3;
}
#insect-lamp .light { top: 10%; }
#insect-lamp:after { clip-path: polygon(32% 5%, 63% 5%, 100% 60%, 100% 65%, 54% 66%, 80% 95%, 68% 100%, 23% 100%, 16% 94%, 42% 66%, 0% 67%, 0% 62%); }

/* clipped elements */
#hey-hand:after {
	clip-path: polygon(26% 1%, 71% 0%, 100% 23%, 100% 32%, 85% 57%, 79% 100%, 38% 100%, 38% 83%, 0% 57%, 0% 50%, 32% 50%);
}
#egg-doll:after {
	clip-path: polygon(55% 1%, 74% 2%, 100% 42%, 89% 75%, 65% 100%, 59% 95%, 64% 63%, 26% 73%, 0% 56%, 4% 48%, 37% 55%, 22% 28%);
}
#bug-pearls:after {
	clip-path: polygon(6% 34%, 20% 35%, 50% 80%, 80% 35%, 91% 35%, 96% 49%, 64% 61%, 56% 100%, 43% 100%, 36% 60%, 5% 48%);
}


#lobster-box { position: relative; pointer-events: none; }
#lobster-box .top, #lobster-box .top .interactive-area {
	position: absolute;
	top: 0; left: 0;
}
#lobster-box .top img {
	position: relative;
	transition: transform .5s;
}
#lobster-box .top .interactive-area {
	pointer-events: initial;
	width: 100%; height: 100%;
	clip-path: polygon(70% 23%, 80% 43%, 45% 85%, 27% 81%, 43% 42%);
}
#lobster-box .top:has(.interactive-area:hover) img, #lobster-box .top:focus-visible img {
	transform: translate(-20%, -20%);
}

body.iSpy:not(.defaultCursor) {
	.findable[data-found=false], .findable[data-found=false].clipped:after { cursor: var(--magnifier-pointer); }
}
body.iSpy.defaultCursor {
	.findable[data-found=false], .findable[data-found=false].clipped:after { cursor: zoom-in; }
}
#findables {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 1000;
	pointer-events: none;
}
#findables > * { pointer-events: initial; }
#findables > button { position: relative; left: -5px; bottom: -8px; }
#findables > button .paper-popout { left: 64%; z-index: -1; }
#findables .details {
	background: var(--paper-color);
	width: min(15em,100%);
	box-sizing: border-box;
}
#findables .details.closed { height: 0px; }
#findables .details > .wrapper {
	padding: 1em 1.5em;
}
#findables ol {
	padding: 0; padding-left: .5em;
	margin: 0; margin-top: .5em;
}
.findable { position: absolute; }