:root {
	--clr: 300;
	--sat: 40%;
}

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(
		circle at 50% 100%,
		hsl(var(--clr), var(--sat), 80%) 20%,
		hsl(var(--clr), var(--sat), 20%) 100%
	);
}

.poster {
	position: relative;
	width: var(--wid);
	height: var(--hei);
	border: 3vmin solid #fff;
	box-shadow: 1vmin 1vmin 1vmin 0vmin #0008;
	background: conic-gradient(
			from 0deg at var(--m1x) var(--m1y),
			#fff0 0 calc(calc(calc(360 - var(--m1d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 25%)
				calc(calc(calc(calc(360 - var(--m1d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m1d)) / 2) + calc(var(--m1d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 10%)
				calc(calc(calc(calc(360 - var(--m1d)) / 2) + var(--m1d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m1d)) / 2) + var(--m1d)) * 1deg) + 1deg
				)
				100%
		),
		linear-gradient(var(--fog1), #fff4 -10%, #fff0 10%),
		conic-gradient(
			from 0deg at var(--m2x) var(--m2y),
			#fff0 0 calc(calc(calc(360 - var(--m2d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 30%)
				calc(calc(calc(calc(360 - var(--m2d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m2d)) / 2) + calc(var(--m2d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 15%)
				calc(calc(calc(calc(360 - var(--m2d)) / 2) + var(--m2d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m2d)) / 2) + var(--m2d)) * 1deg) + 1deg
				)
				100%
		),
		linear-gradient(var(--fog2), #fff2 0%, #fff0 20%),
		conic-gradient(
			from 0deg at var(--m3x) var(--m3y),
			#fff0 0 calc(calc(calc(360 - var(--m3d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 35%)
				calc(calc(calc(calc(360 - var(--m3d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m3d)) / 2) + calc(var(--m3d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 20%)
				calc(calc(calc(calc(360 - var(--m3d)) / 2) + var(--m3d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m3d)) / 2) + var(--m3d)) * 1deg) + 1deg
				)
				100%
		),
		conic-gradient(
			from 0deg at var(--m4x) var(--m4y),
			#fff0 0 calc(calc(calc(360 - var(--m4d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 40%)
				calc(calc(calc(calc(360 - var(--m4d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m4d)) / 2) + calc(var(--m4d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 25%)
				calc(calc(calc(calc(360 - var(--m4d)) / 2) + var(--m4d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m4d)) / 2) + var(--m4d)) * 1deg) + 1deg
				)
				100%
		),
		linear-gradient(var(--fog3), #fff5 0%, #fff0 30%),
		conic-gradient(
			from 0deg at var(--m5x) var(--m5y),
			#fff0 0 calc(calc(calc(360 - var(--m5d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 50%)
				calc(calc(calc(calc(360 - var(--m5d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m5d)) / 2) + calc(var(--m5d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 30%)
				calc(calc(calc(calc(360 - var(--m5d)) / 2) + var(--m5d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m5d)) / 2) + var(--m5d)) * 1deg) + 1deg
				)
				100%
		),
		conic-gradient(
			from 0deg at var(--m6x) var(--m6y),
			#fff0 0 calc(calc(calc(360 - var(--m6d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 60%)
				calc(calc(calc(calc(360 - var(--m6d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m6d)) / 2) + calc(var(--m6d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 40%)
				calc(calc(calc(calc(360 - var(--m6d)) / 2) + var(--m6d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m6d)) / 2) + var(--m6d)) * 1deg) + 1deg
				)
				100%
		),
		conic-gradient(
			from 0deg at var(--m7x) var(--m7y),
			#fff0 0 calc(calc(calc(360 - var(--m7d)) / 2) * 1deg),
			hsl(var(--clr), var(--sat), 70%)
				calc(calc(calc(calc(360 - var(--m7d)) / 2) * 1deg) + 1deg)
				calc(
					calc(calc(calc(360 - var(--m7d)) / 2) + calc(var(--m7d) / 2)) * 1.025deg
				),
			hsl(var(--clr), var(--sat), 50%)
				calc(calc(calc(calc(360 - var(--m7d)) / 2) + var(--m7d)) * 1deg),
			#fff0
				calc(
					calc(calc(calc(calc(360 - var(--m7d)) / 2) + var(--m7d)) * 1deg) + 1deg
				)
				100%
		),
		linear-gradient(var(--fog4), #fff8 20%, #fff0 60%),
		conic-gradient(
			from 135deg at var(--m8x) var(--m8y),
			#fff0 0,
			hsl(var(--clr), var(--sat), 80%) 1deg 15%,
			hsl(var(--clr), var(--sat), 60%) 25%,
			#fff0 25.25% 100%
		),
		conic-gradient(
			from 135deg at var(--m9x) var(--m9y),
			#fff0 0,
			hsl(var(--clr), var(--sat), 90%) 1deg 15%,
			hsl(var(--clr), var(--sat), 70%) 25%,
			#fff0 25.25% 100%
		),
		radial-gradient(
			circle at calc(var(--mox) - calc(var(--moo) / 1.5))
				calc(var(--moy) + calc(var(--moo) / 5)),
			hsl(var(--clr), var(--sat), 90%) 0 calc(var(--moo) / 20),
			#fff0 calc(var(--moo) / 5) 100%
		),
		radial-gradient(
			circle at calc(var(--mox) - calc(var(--moo) / 2))
				calc(var(--moy) + calc(var(--moo) / 2)),
			hsl(var(--clr), var(--sat), 90%) 0 calc(var(--moo) / 10),
			#fff0 calc(var(--moo) / 4) 100%
		),
		radial-gradient(
			circle at var(--mox) var(--moy),
			hsl(var(--clr), var(--sat), 95%) 0 calc(var(--moo) - 0.5%),
			#fff0 calc(var(--moo) + 0.5%) 100%
		),
		radial-gradient(
			circle at var(--mox) var(--moy),
			hsl(var(--clr), var(--sat), 90%) 0 var(--moo),
			#fff0 calc(var(--moo) + 0.25%) 100%
		),
		radial-gradient(
			circle at var(--s1x) var(--s1y),
			hsl(var(--clr), var(--sat), 95%) 0 0.1%,
			#fff0 0.3% 100%
		),
		radial-gradient(
			circle at var(--s2x) var(--s2y),
			hsl(var(--clr), var(--sat), 95%) 0 0.2%,
			#fff0 0.4% 100%
		),
		radial-gradient(
			circle at var(--s3x) var(--s3y),
			hsl(var(--clr), var(--sat), 95%) 0 0.3%,
			#fff0 0.5% 100%
		),
		radial-gradient(
			circle at var(--s4x) var(--s4y),
			hsl(var(--clr), var(--sat), 95%) 0 0.1%,
			#fff0 0.3% 100%
		),
		radial-gradient(
			circle at var(--s5x) var(--s5y),
			hsl(var(--clr), var(--sat), 95%) 0 0.2%,
			#fff0 0.4% 100%
		),
		radial-gradient(
			circle at var(--s6x) var(--s6y),
			hsl(var(--clr), var(--sat), 95%) 0 0.3%,
			#fff0 0.5% 100%
		),
		linear-gradient(
			180deg,
			hsl(var(--clr), var(--sat), 25%) 0%,
			hsl(var(--clr), var(--sat), 90%) 100%
		);
}

.poster:before,
.poster:after {
	content: "";
	width: 6vmin;
	height: 6vmin;
	background: linear-gradient(135deg, #fffd 20%, #fff8 35%, #fff0 50%);
	transform: rotate(45deg) translate(-1px, -1px);
	position: absolute;
	transform-origin: left top;
	left: var(--m8x);
	top: var(--m8y);
}

.poster:after {
	transform: rotate(45deg) translate(-2px, -2px);
	left: var(--m9x);
	top: var(--m9y);
	width: 8vmin;
	height: 8vmin;
}

.poster:hover a.reload {
	opacity: 1;
}

.reload {
	position: absolute;
	background: #0008;
	width: 6vmin;
	height: 6vmin;
	bottom: -4.5vmin;
	left: 50%;
	font-size: 0.8vmin;
	text-transform: uppercase;
	font-family: Arial, Helvetica, serif;
	color: #fff;
	text-decoration: none;
	font-size: 2vmin;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.reload:hover {
	background: #000c;
}

.reload:before {
	content: "";
	width: 2.25vmin;
	height: 2.25vmin;
	position: absolute;
	border: 0.75vmin solid #fff;
	border-radius: 99%;
	border-right-color: #fff0;
	transition: all 0.4s ease 0s;
	border-left-color: #fff0;
}

.reload:after {
	content: "";
	width: 6vmin;
	height: 6vmin;
	position: absolute;
	background: conic-gradient(from 45deg at 0% 100%, #fff 0 25%, #fff0 0 100%),
		conic-gradient(from 225deg at 100% 0%, #fff 0 25%, #fff0 0 100%);
	background-size: 1.25vmin 1.25vmin, 1.25vmin 1.25vmin;
	background-repeat: no-repeat;
	background-position: 3.25vmin 1.15vmin, 1.35vmin 3.65vmin;
	transition: all 0.4s ease 0s;
}

.reload:hover:before,
.reload:hover:after {
	transform: rotate(180deg);
	transition: all 0.4s ease 0s;
}