:root{
	--light-ambience: circle, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5), rgb(0, 0, 0);
	--standard-ambience: circle, rgba(0,0,0,0) 40%, rgba(0, 0, 0, 0.5), rgb(0, 0, 0);
	--dark-ambience: circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.7), rgb(0, 0, 0);
}

html, body {
	background-color: black;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	touch-action: pan-x pan-y;
	scrollbar-width: none;
	scroll-snap-type: both mandatory;
}
main {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-areas:
		'level-1-1 level-2-1 level-3-1 level-4-1'
		'level-1-2 level-2-2 level-3-2 level-4-2'
		'level-1-3 level-2-3 level-3-3 level-4-3'
		'level-1-4 level-2-4 level-3-4 level-4-4'
	;
}

section {
	width: 100vw;
	height: 100vh;
	scroll-snap-align: center;
}

section img {
	width: 100%;
	height: 100%;
}

/* character selectors */
div > img{
	position: fixed;
	top: 47vh;
	left: 47vw;
	filter: drop-shadow(0px 10px 10px black);
	transition: 0.25s all ease;
}
div > img:active{
	filter: drop-shadow(0px 3vh 20px black);
	transition: all ease 0.25s;
	transform: translateY(-3vh);
}
/* ambient shadow selectors */
.ambience{
	background-image: radial-gradient(var(--standard-ambience));
	position: absolute;
	height: 100%;
	width: 100%;
}
.level-1-1 .ambience, .level-4-1 .ambience, .level-1-4 .ambience, .level-2-4 .ambience{
	background-image: radial-gradient(var(--light-ambience));
}
.level-3-1 .ambience, .level-3-2 .ambience, .level-1-3 .ambience, .level-2-3 .ambience, .level-3-4 .ambience{
	background-image: radial-gradient(var(--dark-ambience));
}
/* grid area selectors */
.level-1-1 {
	grid-area: level-1-1;
}
.level-2-1 {
	grid-area: level-2-1;
}
.level-3-1 {
	grid-area: level-3-1;
}
.level-4-1 {
	grid-area: level-4-1;
}
.level-1-2 {
	grid-area: level-1-2;
}
.level-2-2 {
	grid-area: level-2-2;
}
.level-3-2 {
	grid-area: level-3-2;
}
.level-4-2 {
	grid-area: level-4-2;
}
.level-1-3 {
	grid-area: level-1-3;
}
.level-2-3 {
	grid-area: level-2-3;
}
.level-3-3 {
	grid-area: level-3-3;
}
.level-4-3 {
	grid-area: level-4-3;
}
.level-1-4 {
	grid-area: level-1-4;
}
.level-2-4 {
	grid-area: level-2-4;
}
.level-3-4 {
	grid-area: level-3-4;
}
.level-4-4 {
	grid-area: level-4-4;
}