* {
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
}

body {
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	display: grid;
	place-items: center;
	font-size: 40px;
	perspective: 50em;
}
body *:not(:empty) {
	transform-style: preserve-3d;
}

input[type=checkbox] {
	display: none;
}
input[type=checkbox]:checked ~ .pendulum {
	--ry: 360deg;
}
input[type=checkbox]:checked ~ label {
	--ry: 180deg;
}

label {
	position: fixed;
	top: calc(50% - 7em);
	cursor: pointer;
	transform: rotateY(var(--ry, 0));
	transition: transform 5s;
}
label:hover > svg {
	opacity: 0.5;
}
label svg {
	width: 3em;
	height: 2em;
	fill: #fff;
	opacity: 0.3;
}

.pendulum {
	position: relative;
	transform: rotateY(var(--ry, 0deg));
	transition: transform 10s;
}

.topbar {
	position: absolute;
	top: -4em;
}
.topbar > div {
	position: absolute;
	width: 1em;
	height: var(--height, 1em);
	background-color: #420;
	transform: translate(-50%, -50%) var(--transform);
	box-shadow: 0 0 1em #000 inset;
	opacity: 0.9;
}
.topbar > div:nth-child(1) {
	--transform: translateZ(8em);
}
.topbar > div:nth-child(2) {
	--transform: rotateY(180deg) translateZ(8em);
}
.topbar > div:nth-child(3) {
	--height: 16em;
	--transform: rotateZ(0deg) rotateX(90deg) translateZ(0.5em);
}
.topbar > div:nth-child(4) {
	--height: 16em;
	--transform: rotateZ(90deg) rotateX(90deg) translateZ(0.5em);
}
.topbar > div:nth-child(5) {
	--height: 16em;
	--transform: rotateZ(180deg) rotateX(90deg) translateZ(0.5em);
}
.topbar > div:nth-child(6) {
	--height: 16em;
	--transform: rotateZ(270deg) rotateX(90deg) translateZ(0.5em);
}

.balls {
	position: absolute;
	top: -3.5em;
}

.ball {
	position: absolute;
	-webkit-animation: ballSwing var(--duration, 0s) calc(var(--duration, 0s) * -0.5) infinite ease-in-out alternate;
	animation: ballSwing var(--duration, 0s) calc(var(--duration, 0s) * -0.5) infinite ease-in-out alternate;
}
@-webkit-keyframes ballSwing {
	from {
		transform: translateZ(var(--tz, 0)) rotateZ(-45deg);
	}
	to {
		transform: translateZ(var(--tz, 0)) rotateZ(45deg);
	}
}
@keyframes ballSwing {
	from {
		transform: translateZ(var(--tz, 0)) rotateZ(-45deg);
	}
	to {
		transform: translateZ(var(--tz, 0)) rotateZ(45deg);
	}
}
.ball .string {
	position: absolute;
	left: -1px;
	width: 2px;
	height: calc(var(--ty, 0) - 0.5em);
	background-color: hsla(var(--hue, 0), 75%, 75%, 0.1);
	transform: rotateX(var(--rx, -3deg));
	transform-origin: bottom;
	transform-style: preserve-3d;
}
.ball .string:nth-child(2) {
	--rx: 3deg;
}
.ball .string::before, .ball .string::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: rotateY(var(--ry, 120deg));
	background-color: inherit;
}
.ball .string::after {
	--ry: 240deg;
}
.ball .face {
	position: absolute;
	animation: faceSwing var(--duration, 0s) calc(var(--duration, 0s) * -0.5) infinite ease-in-out alternate-reverse;
	transform-style: preserve-3d;
}
@-webkit-keyframes faceSwing {
	from {
		transform: translateY(var(--ty, 5em)) rotateZ(-45deg);
	}
	to {
		transform: translateY(var(--ty, 5em)) rotateZ(45deg);
	}
}
@keyframes faceSwing {
	from {
		transform: translateY(var(--ty, 5em)) rotateZ(-45deg);
	}
	to {
		transform: translateY(var(--ty, 5em)) rotateZ(45deg);
	}
}
.ball .face::after {
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	background-color: hsl(var(--hue, 0), 75%, 75%);
	background-image: radial-gradient(circle at top, #0000, #000);
	border-radius: 50%;
	box-shadow: 0 0 1em #000;
	transform: translate(-50%, -50%) rotateY(var(--ry, 720deg));
	transition: transform 10s;
}

.floor {
	position: absolute;
	top: 7em;
	width: 30em;
	height: 30em;
	background-color: #024;
	background-image: radial-gradient(#0000, #000 15em), repeating-conic-gradient(from 20deg, #000 0 90deg, #0000 0 180deg);
	background-size: 100% 100%, 2em 2em;
	transform: translate(-50%, -50%) rotateX(90deg);
}

.shadow {
	position: absolute;
	left: 50%;
	top: calc(50% + var(--tz, 0em));
	width: calc(6em - var(--ty, 0) * 0.2);
	height: calc(8em - var(--ty, 0) * 0.2);
	border-radius: 50%;
	background-image: radial-gradient(#000, #0000 50%);
	-webkit-animation: shadow var(--duration) calc(var(--duration, 0s) * -0.5) infinite ease-in-out alternate;
	animation: shadow var(--duration) calc(var(--duration, 0s) * -0.5) infinite ease-in-out alternate;
	transform: translate(-50%, -50%);
}
@-webkit-keyframes shadow {
	from {
		transform: translate(-50%, -50%) translateX(10em);
	}
	to {
		transform: translate(-50%, -50%) translateX(-10em);
	}
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}
@keyframes shadow {
	from {
		transform: translate(-50%, -50%) translateX(10em);
	}
	to {
		transform: translate(-50%, -50%) translateX(-10em);
	}
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

.ball:nth-child(1), .shadow:nth-child(1) {
	--tz: -7em;
	--duration: 1s;
	--ty: 6em;
	--hue: 0;
}
.ball:nth-child(2), .shadow:nth-child(2) {
	--tz: -6em;
	--duration: 1.0344827586s;
	--ty: 6.25em;
	--hue: 24;
}
.ball:nth-child(3), .shadow:nth-child(3) {
	--tz: -5em;
	--duration: 1.0714285714s;
	--ty: 6.5em;
	--hue: 48;
}
.ball:nth-child(4), .shadow:nth-child(4) {
	--tz: -4em;
	--duration: 1.1111111111s;
	--ty: 6.75em;
	--hue: 72;
}
.ball:nth-child(5), .shadow:nth-child(5) {
	--tz: -3em;
	--duration: 1.1538461538s;
	--ty: 7em;
	--hue: 96;
}
.ball:nth-child(6), .shadow:nth-child(6) {
	--tz: -2em;
	--duration: 1.2s;
	--ty: 7.25em;
	--hue: 120;
}
.ball:nth-child(7), .shadow:nth-child(7) {
	--tz: -1em;
	--duration: 1.25s;
	--ty: 7.5em;
	--hue: 144;
}
.ball:nth-child(8), .shadow:nth-child(8) {
	--tz: 0em;
	--duration: 1.3043478261s;
	--ty: 7.75em;
	--hue: 168;
}
.ball:nth-child(9), .shadow:nth-child(9) {
	--tz: 1em;
	--duration: 1.3636363636s;
	--ty: 8em;
	--hue: 192;
}
.ball:nth-child(10), .shadow:nth-child(10) {
	--tz: 2em;
	--duration: 1.4285714286s;
	--ty: 8.25em;
	--hue: 216;
}
.ball:nth-child(11), .shadow:nth-child(11) {
	--tz: 3em;
	--duration: 1.5s;
	--ty: 8.5em;
	--hue: 240;
}
.ball:nth-child(12), .shadow:nth-child(12) {
	--tz: 4em;
	--duration: 1.5789473684s;
	--ty: 8.75em;
	--hue: 264;
}
.ball:nth-child(13), .shadow:nth-child(13) {
	--tz: 5em;
	--duration: 1.6666666667s;
	--ty: 9em;
	--hue: 288;
}
.ball:nth-child(14), .shadow:nth-child(14) {
	--tz: 6em;
	--duration: 1.7647058824s;
	--ty: 9.25em;
	--hue: 312;
}
.ball:nth-child(15), .shadow:nth-child(15) {
	--tz: 7em;
	--duration: 1.875s;
	--ty: 9.5em;
	--hue: 336;
}