html,
body {
	height: 100%;
}
body {
	margin: 0;
	height: auto;
	min-height: 100%;
	/* background: url(/media/vector/ud.svg) no-repeat 101% 101%/7% auto,
		url(/media/vector/quacken.svg) no-repeat 30% 97% / auto 25%,
		url(/media/vector/release.svg) no-repeat center center/70% auto,
		linear-gradient(
				161.5deg,
				rgba(0, 0, 0, 0) 40%,
				rgba(0, 0, 0, 0.07) 50%,
				rgba(0, 0, 0, 0.4)
			)
			#11befd; */
	background: #11befd;
}

main {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
main::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 1px, transparent 1px)
			10px 0,
		linear-gradient(90deg, rgba(0, 0, 0, 0.4) 1px, transparent 1px) 10px 0;
	background-size: 10px 10px;
}
video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media (orientation: portrait) {
	video {
		object-fit: fill;
	}
}
h1 {
	position: absolute;
	bottom: 0;
	font-family: sans-serif;
	font-size: 20px;
	color: hsla(0, 0%, 100%, 0.4);
	text-align: center;
	width: 100%;
	font-weight: normal;
}