body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	width: 100dvw;
	height: 100dvh;
}

.video-container {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	overflow: hidden; /* Ensures the video doesn't spill out */
}

.video-container video, .prompt-container img, .footer-container {
	position: absolute;
	left: 0;
	width: 100dvw;
	height: 100dvh;
}

.video-container video {
	top: 0;
	object-fit: cover; /* Covers the container, may crop */
	object-position: center; /* Centers the video */
}

.prompt-container img {
	top: 0;
	object-fit: contain;
	object-position: center;
	opacity: 0;
}

.footer-container {
	bottom: 0;
	display: flex;
	align-items: end;
}

/*
.footer-container img, .footer-container .img {
	width: 100dvw;
	position: relative;
	bottom: 0px;
	object-fit: cover;
	background: #fff;
	max-width: 100dvw;
}
*/

.footer-container .img {
	line-height: 0;
}

.footer-container .img svg {
	width: 100dvw;
	height: auto;
}	

.prompt-container {	
    pointer-events: none;
}

@media only screen and (orientation : portrait) {
	.video-container video {
		transform: rotate(0.25turn);
		width: 100dvh;
		height: 100dvw;
		top: calc((100dvh - 100dvw) / 2);
		left: calc((100dvw - 100dvh) / 2);
	}

	.footer-container {
		bottom: calc(100% - 100dvh);
	}
	
	.footer-container .hide-v {
		display: none;
	}
}

@media only screen and (orientation : portrait) and (max-width : 500px) {
	.prompt-container img {
		opacity: 1;
		transition: all ease-in 0.25s;
	}
}

@media only screen and (orientation : landscape) {	
	.footer-container .hide-h {
		display: none;
	}
}