:root {
	--nav-num: 3;
}

#main-container {	
	display: grid;
	grid:
		"header header header" 2em
		"shrineL main shrineR" auto
		"footer footer footer" 10em
		/1fr 1fr 1fr;
}
#shrineL-container {
	grid-area: shrineL;
}
#shrineR-container {
	grid-area: shrineR;
}

@keyframes space-parallax {
	from {
		background-position: bottom 0px center;
	}
	to {
		background-position: bottom -129% center;
	}
}	

body {
	background-image: var(--parallax-back-image);
	background-color: var(--parallax-back-color);
	background-blend-mode: multiply;
	
	animation: space-parallax linear;
	animation-timeline: view();
	
	margin:0;
}

@keyframes constellation-parallax {
	from {
		transform: translateY(20px);
	}
	to {
		transform: translateY(0px);
	}
}	

.constellation-button {
	animation: constellation-parallax linear;
	animation-timeline: scroll();
}

.constellation-button img {
	transform: scale(0.7);
}

.constellation-button:hover img {
	transform: scale(0.75);
}

.shrine-nav {
	position: sticky;
	top: 1%;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 40vw;
}

#sea {
	grid-area:footer;
	background-image: url("../assets/wabber.png");
}

#main-nav {
	grid-area: main;
	display: grid;
	grid:
		"light" 25em
		"rooms" auto
		"bottom" 25em
		;	
}

#light-top {
	grid-area: light;
}

#room-nav {
	grid-area: rooms;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#nav-bottom {
	grid-area: bottom;
}

.room-button {
	background: url("../assets/brickwall.webp");
	height: 15em;
	width: 70%;
}