html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* Prevent scrolling if any slight overflow occurs */
	position: relative;  /* Context for absolute positioning if needed, though not strictly required here */
}

.video-container {
	/* Position absolutely to ensure it's precisely aligned to the viewport */
    position: absolute;
	top: 0;
	left: 0;
	width: 100vw; /* Take 100% of the viewport width */
	height: 100vh; /* Take 100% of the viewport height */
	display: flex; /* Use flexbox to center the image inside its container */
	justify-content: center;
	align-items: flex-start;
}

.video-container video {
	max-width: 100%; /* Ensure the image doesn't exceed container width */
	max-height: 100%; /* Ensure the image doesn't exceed container height */
	/* Using width/height: auto in combination with object-fit: contain
       allows the browser to correctly calculate the dimensions based on aspect ratio */
	width: auto; /* Allow width to be determined by object-fit */
	height: auto; /* Allow height to be determined by object-fit */
	object-fit: contain; /* Crucial: Scales the image to fit entirely within the container without cropping, maintaining aspect ratio */
	display: block; /* Removes any extra space below the image */
}