body {
	background-image: url('images/tapestry_forest.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: fixed;
}

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

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

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

/* 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-child {
	position: relative;
}
.window:before {
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: url('/graphix/bg/stars_gold_green.png');
	background-size: 250px;
	background-attachment: fixed;
	pointer-events: initial;
}
.window.window-90:before { width: 90%; height: 90%; top: 5%; left: 5%; }
.window.window-80:before { width: 80%; height: 80%; top: 10%; left: 10%; }
.window.window-70:before { width: 70%; height: 70%; top: 15%; left: 15%; }
.window.window-60:before { width: 60%; height: 60%; top: 20%; left: 20%; }
.window.window-50:before { width: 50%; height: 50%; top: 25%; left: 25%; }
.window.window-40:before { width: 40%; height: 40%; top: 30%; left: 30%; }
.window.window-30:before { width: 30%; height: 30%; top: 35%; left: 35%; }
.window.window-20:before { width: 20%; height: 20%; top: 40%; left: 40%; }
.window.window-round:before { border-radius: 50%; }

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

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

.pot {
	position: absolute;
	width: fit-content;
	.front { border-radius: 46%; width: 80%; left: 12%; }
	.front img { 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; pointer-events: none;}
}
.pot:has(.front:hover, .front:focus-visible, .front:active) .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; }
	&:nth-child(3) { left: 3px; }
	transition: transform .5s;
}
.spoons:hover {
	*: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; }