/* Footer
==================================== */
footer{
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	width: 100vw;
	height: fit-content;
	height: -moz-fit-content;
	align-self: flex-end;
	display: grid;
	grid-auto-rows: min-content;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	z-index: 3;
}
@media (min-width: 835px){
	footer{
		position: relative;
		margin-top: var(--margin-sides);
		background-color: var(--color-bg);
	}
}
@media (max-width: 834px){
	footer{
		padding: 40px 0 var(--margin-sides);
		background-image: linear-gradient(to top, var(--color-bg) 33%, rgba(0, 0, 0, 0));
	}
}

/* Marquee
============================== */
@-webkit-keyframes marquee-left{
	0%{
		-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			 -ms-transform: translateX(0);
				  transform: translateX(0);
	}
	100%{
		-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			 -ms-transform: translateX(-100%);
				  transform: translateX(-100%);
	}
}
@keyframes marquee-left{
	0%{
		-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			 -ms-transform: translateX(0);
				  transform: translateX(0);
	}
	100%{
		-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			 -ms-transform: translateX(-100%);
				  transform: translateX(-100%);
	}
}

/* Project Info
==================================== */
@media (min-width: 835px){
	.mobile #project-info{
		display: none;
	}
	#project-info{
		position: relative;
		width: 100vw;
		height: calc(var(--height-txt-large) + var(--margin-sides)*2);
		display: grid;
		align-self: center;
		white-space: nowrap;
	}
	#project-info_number{
		display: none;
	}
	#project-info_text{
		width: 100vw;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		background-color: var(--color-bg);
		mix-blend-mode: multiply;
		z-index: 3;
	}
	#project-info_text wrap{
		padding: var(--margin-sides);
	}
	#project-info_text.marquee wrap{
		animation: marquee-left linear infinite;
		animation-duration: inherit;
	}
	#project-info_text wrap:empty{
		display: none;
	}
	#project-info_overlay{
		position: absolute;
		width: 100vw;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.15);
		border: 1px solid var(--color-bg);
		z-index: 2;
	}
	#project-info img,
	#project-info video{
		position: absolute;
		width: 100vw;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
}
@media (max-width: 834px){
	#project-info_number:not(:empty){
		padding: var(--margin-sides) var(--margin-sides) 3px;
	}
	#project-info_text{
		padding: 0 var(--margin-sides);
	}
	#project-info img,
	#project-info video,
	#project-info_overlay{
		display: none !important;
	}
}