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

#main-container {	
	display: grid;
	grid:
		"header header header" 2em
		"shrineL main shrineR" auto
		"footer footer footer" 10em
		/1fr 25% 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-color: blue;
}

#main-nav {
	grid-area: main;
	display: grid;
	justify-items: center;
	grid:
		"light" auto
		"rooms" auto
		"bottom" auto
		/100%;		
}
#room-nav {
	width: 100%;
	grid-area: rooms;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.room-button {
	background: url("../assets/brickwall.webp");
	height: 15em;
	width: 65%;
}

#light-top {
	grid-area: light;
	width: 90%;
}
#light-top svg {
	bottom: 0;
	display: flex;
	align-items: end;
}
#nav-bottom {
	grid-area: bottom;
	width: 120%;
}

/*lighthouse svg styling*/
#fence {
	stroke: brown;
}
#dome_base, #top_accent, #cutout {
	stroke: brown; fill: brown;
}
#light {
	stroke: yellow; fill: yellow;
}
#light_grate, #top_rim, #dome{
	stroke: orange; fill: orange;
}
#top_base, #base {
	stroke: url(#bricks); fill: url(#bricks);
}