:root{
	--scrolldeg: 0deg;
	--scroll: 0%;
}
html{
	margin: 0;
	padding: 0;
	overscroll-behavior: none;
}
html::-webkit-scrollbar {
    display: none;
}
body{
	margin: 0;
	padding: 0;
  	height: 1100vh;
	overscroll-behavior: none;
}
body::-webkit-scrollbar {
    display: none;
}

#body{
	position: fixed;
	top: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: grid;
	background-color:#010101;
	overflow: hidden;
	overscroll-behavior: none;
}
#body::-webkit-scrollbar {
    display: none;
}

a{
  	text-decoration: none;
}

	#nav_merriman{
		width: 100vw;
		max-width: 100%;
		height: calc(max(80px, 50vh - 200px));
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	@keyframes bouncing{
		0% { top: -200px; left: -100px; }
		50% { top: 0; left: -50px; }
		75% { top: -50px; left: -25px; }
		100% { top: 0; left: 0; }
	}

	#link_merriman{
		font-size: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		color: white;
	}
	
	.letter{
		position: relative;
		animation: la 3s linear var(--latency) infinite alternate, bouncing 2s linear calc(var(--latency) / 5) forwards;
	}

	#link_merriman:hover .letter{
		animation: la 3s linear var(--latency) infinite alternate, scale 1s linear calc(var(--latency) / 5);
	}
		
	@keyframes la{
		0% { color: #3e6950; }
		10% { color: #3e6950; }
		90% { color: #ffffff; }
		100% { color: #ffffff; }
	}

	@keyframes scale{
		0% { scale: 1; }
		50% { scale: 1.2; }
		100% { scale: 1; }
	}


	#gallery_container{
		width: 100vw;
		max-width: 100%;
		height: 360px;
		position: fixed;
		top: 0;
		margin: calc(50vh - 200px) 0 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		user-select: none;
		pointer-events: none;
	}
			
	#gallery{
		width: 300px;
		height: 200px;
		transform-style: preserve-3d;
		transform: perspective(1000px) rotateY(var(--scrolldeg));
		scale: 0.0001;
		transition: transform 1s ease-out;
		animation: loading_scale 3s linear 3s forwards;
		pointer-events: none;
	}

	@keyframes loading_scale{
		0% { scale: 0.1; }
		30% { scale: 1; }
		70% { scale: 1.3; }
		100% { scale: 1.3; }
	}

	@keyframes loading_vertical_scale_1{
		0% { scale: 0.1; }
		30% { scale: 0.7; }
		70% { scale: 1; }
		100% { scale: 1; }
	}

	@keyframes loading_vertical_scale_07{
		0% { scale: 0.1; }
		30% { scale: 0.5; }
		70% { scale: 0.7; }
		100% { scale: 0.7; }
	}
			
	#gallery span{
		position: absolute;
		width: 300px;
		height: 200px;
		transform-origin: center;
		transform-style: preserve-3d;
		transform: rotateY(calc(var(--i) * 45deg)) translateZ(380px);
		pointer-events: none;
	}
			
	#gallery span img{
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		background-color: rgb(calc(var(--i) * 20), 99, 71);
		transition: opacity 0.5s ease-in, box-shadow 500ms ease-out;
		pointer-events: auto;
		box-sizing: border-box;
		cursor: url(insta.png) 15 15, auto;
	}

	#gallery span img:hover{
		box-shadow: 0px 0px 10px 5px white;
	}

	
@media screen and (max-width: 1200px){
	#gallery{
		animation: loading_vertical_scale_1 3s linear 3s forwards;
	}
}

@media screen and (max-width: 900px){
	#gallery{
		animation: loading_vertical_scale_07 3s linear 3s forwards;
	}
}