body {
	background: rgba(116, 144, 177, 0.5);
}

/* randaomly rotate and place the images in the background into a dithered mosaic */
.bg-mosaic {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 55% 45%;
	gap: 4px;
	transform: skewY(-2deg) scaleX(1.04);
	transform-origin: top left;
}

.bg-mosaic > div {
	background-size: cover;
	background-position: center;
}

.bg-mosaic > div:first-child {
	grid-row: span 2;
	clip-path: polygon(0 0, 100% 3%, 95% 100%, 0 97%);
}

.bg-mosaic > div:nth-child(2) {
	clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.bg-mosaic > div:nth-child(3) {
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 5% 95%);
}

header {
	background: linear-gradient(to right, rgba(251, 159, 46, 0.75), rgba(116, 144, 177, 0.8));
}

nav a {
	background: linear-gradient(to right, rgba(121, 141, 157, 0.9), var(--gradientBottom));
}

nav a:hover, nav a:focus {
	background: linear-gradient(to right, rgba(121, 141, 157, 0.9), var(--gradientBottom), var(--gradientTop));
}

/* Header + nav wrapper without a background box */
.head_container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	/* background: rgba(116, 144, 177, 0.9);  */
}

.container section {
	background: rgba(116, 144, 177, 0.2);
	border: 1px solid rgba(116, 144, 177, 0.4);
}

/* Override .imgtxt for the narrower poster images */
.imgtxt {
	width: 300px;
}

.imgtxt:hover img, .imgtxt:focus img {
	rotate: -8deg;
}
