<div class="album dark-side-of-the-moon" role="image"></div>
<input type="range" min="0" max="1" value="0" step=".01"/>

* { box-sizing: border-box }

body {
	margin: 0;
	height: 100vh;
	align-content: center;
}

.album {
	width: 90vmin;
	aspect-ratio: 1;
	margin: auto;
}

.dark-side-of-the-moon {
	background:
		linear-gradient(
			to top,
			white,
			transparent
		) 50% 50.5% / 30% 1%,
		linear-gradient(
			to right bottom,
			transparent 0 50%,
			white 0,
			transparent 55%
		) 41% 33% / 15.25% 27%,
		linear-gradient(
			to left bottom,
			transparent 0 50%,
			white 0,
			transparent 55%
		) 59% 33% / 15.25% 27%,
		linear-gradient(
			166deg,
			black 0 42.5%,
			white 0 43%,
			black 0
		) 0 / 44% no-repeat,
		conic-gradient(
			from 75deg at -5% 36.6%,
			transparent 0 25deg,
			black 0
		) 49% / 11% no-repeat,
		linear-gradient(
			to right, white, black
		) 49% / 11% no-repeat,
		linear-gradient(
			to left bottom,
			transparent 0 50%,
			black 0
		) 59% 33% / 15.5% 27%,
		conic-gradient(
			from 99deg at 15% 27%,
			red 0 1.2deg,
			orange 0 2.2deg,
			yellow 0 3.3deg,
			limegreen 0 4.4deg,
			royalblue 0 5.5deg,
			darkviolet 0 6.6deg,
			black 0
		);
	background-repeat: no-repeat;
	position: relative;
	
	&::after {
		opacity: var(--opacity, 0);
		content: '';
		position: absolute;
		inset: 0;
		background: url(https://upload.wikimedia.org/wikipedia/en/3/3b/Dark_Side_of_the_Moon.png) 0 / cover;
	}
}

input {
	display: none;
	width: 50vmin;
	position: absolute;
	
	@media (orientation: portrait) {
		bottom: 5vmax;
		left: 50%;
		translate: -50%;
	}

	@media (orientation: landscape) {
		rotate: -90deg;
		top: 50%;
		right: -20vmin;
	}
}

document.documentElement.addEventListener('input', (event) => {
	document.documentElement.style.setProperty(
		'--opacity',
		event.target.value,
	);
});