html,
body {
	min-height: 100vh;
	margin: 0;
}

* {
	box-sizing: border-box;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	padding: 8px;
	max-width: 1500px;
	margin: auto;

	background:
		linear-gradient(to bottom,
			transparent,
			#bbbbbb 89%,
			#ccccccee 90%,
			#aaaaaaee 100%);
}

h1, h2, h3, h4, h5, p {
	margin: 0 0 8px;
}

.title {
	text-shadow: 2px 2px 0 #00000055;

	* {
		display: inline;
		margin: 0;
	}

	h3::before {
		content: "/";
	}

	a {
		color: #000;
		text-decoration: none;
	}

	@media screen and (max-width: 700px) {
		text-align: right;

		h1 {
			font-size: 40px;
		}
	}
}

nav {
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		list-style: none;
		padding: 0;
		margin: 12px 0 0;

		li::after {
			content: "/";
		}
	}

	a {
		color: inherit;
	}
}

.window-container {
	position: absolute;
	inset: 0;

	@media screen and (max-width: 700px) {
		position: static;

		display: flex;
		flex-direction: column;
		padding: 16px;
		gap: 8px;

		.window {
			position: static;
		}
	}
}

.window {
	--zoom: 2;

	position: absolute;
	display: inline-block;

	max-width: max(35%, 300px);
	zoom: var(--zoom);

	user-select: none;
	transform: translate(calc(var(--x, 0px) / var(--zoom)), calc(var(--y, 0px) / var(--zoom)));

	@media screen and (max-width: 700px) {
		max-width: none;
		transform: none;
	}

	.window-buttons {
		display: flex;
		justify-content: flex-end;
	}

	.button-link {
		padding: 4px 12px !important;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
	}
}

video {
	min-width: 400px;

	@media screen and (max-width: 700px) {
		min-width: 85%;
	}
}

section {
	border: 2px solid #000;
	background: #fff;
	box-shadow: 2px 2px 0 #00000055;
	padding: 16px;

	font-size: 14px;
}