:root {
	--unit: 1vmin;
	--zoom: 100;
	--available-screen-min: 665;
	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
	--auto-rotate-duration: 10s;
	--auto-rotate-timing-func: ease;
	--auto-rotate-direction: forwards;
	--fallback-fonts:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, Ubuntu, sans-serif, 'Apple Color Emoji',
		'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
}

*::before,
*::after {
	display: block;
}

body {
	touch-action: none;
}

html {
	cursor: -webkit-grab;
	cursor: grab;
}

html:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

html,
body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	scrollbar-width: thin;
	font-size: 0;
	overflow: hidden;
	/* to make touch gestures work correctly */
}

html::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
	background-size: 100vw 100vh;
	background-repeat: no-repeat;
}

[data-camera] {
	--scene-size: 500;
	--scale: 100;
	--perspective: 1200;
	--cameraZ: 0;
	--cameraY: 0;
	--translateX: 0;
	--translateY: 0;
	--translateZ: 0;
}

[data-camera] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	--fmt-s: calc(var(--scale, 100) / 100);
	transform: scale(var(--fmt-s));
	display: grid;
	place-items: center;
	overflow: visible;
	transition: transform ease 500ms;
	will-change: transform;
}

[data-scene] {
	position: relative;
	left: 0;
	top: 0;
	width: calc(var(--scene-size) * var(--px));
	height: calc(var(--scene-size) * var(--px));
	background-color: rgba(0, 0, 0, 0.1);
	transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
		rotateZ(calc(var(--cameraZ, 0) * 1deg))
		translate3d(
			calc(var(--translateX, 0) * var(--px)),
			calc(var(--translateY, 0) * var(--px) * -1),
			calc(var(--translateZ, 0) * var(--px) * -1)
		);
	--max-rotation: calc((360 + var(--cameraZ)) * 1deg);
	transform-origin: 50% 50%;
}

[data-camera][data-dragging] {
	transition: none;
}

@-webkit-keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
			rotateZ(var(--max-rotation))
			translate3d(
				calc(var(--translateX, 0) * var(--px)),
				calc(var(--translateY, 0) * var(--px) * -1),
				calc(var(--translateZ, 0) * var(--px) * -1)
			);
	}
}

@keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
			rotateZ(var(--max-rotation))
			translate3d(
				calc(var(--translateX, 0) * var(--px)),
				calc(var(--translateY, 0) * var(--px) * -1),
				calc(var(--translateZ, 0) * var(--px) * -1)
			);
	}
}
[data-scene],
[data-camera],
[data-3d] {
	transform-style: preserve-3d;
}

[data-hidden],
.class-hidden {
	display: none;
}

.test [data-camera] {
	--cameraY: 42;
	--cameraZ: 30;
	--translateZ: 62.5;
}

.test .pentagon {
	--diameter: 500;
	--depth: 100;
	--color-face: #1b83cf;
	--color-side: #156fb1;
	--color-shade: rgba(0, 0, 0, 0.07);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.test .pentagon {
	--calc-theta: calc(360 / var(--n));
	--calc-diameter: calc(var(--diameter) * var(--px));
	--calc-radius: calc(var(--calc-diameter) * 0.5);
	--calc-depth: calc(var(--depth) * var(--px));
	width: var(--calc-diameter);
	height: var(--calc-diameter);
}
.test .pentagon::before,
.test .pentagon::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-face);
	-webkit-clip-path: var(--polygon);
	clip-path: var(--polygon);
	display: block;
}
.test .pentagon::after {
	transform: translateZ(var(--calc-depth));
}
.test .pentagon div {
	--beta: calc(var(--shift) * 1deg);
	--angle: calc(var(--calc-theta) * var(--i) * 1deg);
	--perpendicular: calc(var(--calc-radius) * var(--perpend));
	--calc-edge: calc(var(--calc-diameter) * var(--edge));
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--calc-edge);
	height: var(--calc-depth);
	background-color: var(--color-side);
	transform: translateX(-50%) rotateZ(var(--beta)) rotateZ(var(--angle)) translateX(var(--perpendicular))
		rotateX(90deg) rotateY(90deg);
	transform-origin: center top;
}
.test .pentagon div:nth-child(2n) {
	background-image: linear-gradient(var(--color-shade) 0 0);
}
.test .pentagon div,
.test .pentagon::before,
.test .pentagon::after {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
	transform-style: preserve-3d;
}