.-pen-placeholder {
	background: #181921 url('https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png') center
		center/50vmin 50vmin no-repeat;
	height: 100vh;
}

:root {
	--chrome-factor: 0;
	--firefox-factor: 1;
}

@supports not (-moz-appearance: none) {
	:root {
		--chrome-factor: 1;
		--firefox-factor: 0;
	}
}
: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;
}

/* hint: drag to rotate the shape, double click to animate the rotation */
/*
 * 25 March, 2022 (rev. 2)
 * CSS 3D Lowpoly Pyramid (simplified)
 * originally created on 10 December, 2021
 *
 * This pen demonstrates a simple approach of creating a low-poly pyramid shape for use in CSS 3D projects
 *
 */
[data-camera] {
	--cameraY: 0;
	--cameraZ: 360;
	--translateZ: 100;
	filter: drop-shadow(0 0 calc(60 * var(--px)) #4d4d4d);
}

[data-autorotate] [data-pyramid] {
	transform: translate(-50%, -50%) rotate(0);
	-webkit-animation: rotateZ linear 5s infinite;
	animation: rotateZ linear 5s infinite;
}

@-webkit-keyframes rotateZ {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

@keyframes rotateZ {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
html::before {
	background-image: radial-gradient(circle at center, #fff, #ececec);
}

[data-scene] {
	background-color: #0000;
}

[data-pyramid] {
	--points: 20;
	--theta: 18;
	--alpha: 9;
	--beta: 81;
	--slant-start: 9;
	--shift: 0;
	--radius: 200;
	--base-width: 62.5737860161;
	--half-base-width: 31.286893008;
	--slant-base-width: 197.537668119;
	--slant-length: 359.195114563;
	--slant-angle: 33.3632609906;
	--diameter: calc(var(--radius) * 2);
	--height: 300;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	--calc-diameter: calc(var(--diameter) * var(--px));
	--calc-radius: calc(var(--radius) * var(--px));
	--calc-height: calc(var(--height) * var(--px));
	--calc-base-width: calc(var(--base-width) * var(--px));
	--calc-slant-base-width: calc(var(--slant-base-width) * var(--px));
	--calc-slant-length: calc(var(--slant-length) * var(--px));
	--calc-slant-angle: calc(var(--slant-angle) * -1deg);
	--calc-alpha: calc(var(--alpha) * 1deg);
	--base-polygon: polygon(
		97.5528258148% 65.4508497187%,
		90.4508497187% 79.3892626146%,
		79.3892626146% 90.4508497187%,
		65.4508497187% 97.5528258148%,
		50% 100%,
		34.5491502813% 97.5528258148%,
		20.6107373854% 90.4508497187%,
		9.5491502813% 79.3892626146%,
		2.4471741852% 65.4508497187%,
		0% 50%,
		2.4471741852% 34.5491502813%,
		9.5491502813% 20.6107373854%,
		20.6107373854% 9.5491502813%,
		34.5491502813% 2.4471741852%,
		50% 0%,
		65.4508497187% 2.4471741852%,
		79.3892626146% 9.5491502813%,
		90.4508497187% 20.6107373854%,
		97.5528258148% 34.5491502813%,
		100% 50%
	);
	transform-style: preserve-3d;
	width: var(--calc-diameter);
	height: var(--calc-diameter);
}
[data-pyramid] div {
	transform-style: preserve-3d;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}
[data-pyramid]::before {
	content: '';
	--margin: 0.5px;
	background-color: #d65c5c;
	position: absolute;
	left: var(--margin);
	right: var(--margin);
	top: var(--margin);
	bottom: var(--margin);
	-webkit-clip-path: var(--base-polygon);
	clip-path: var(--base-polygon);
	box-shadow: none;
	display: block;
}
[data-pyramid] div {
	--rgb-background: hsl(calc(var(--i) * 18deg), 60%, 60%);
	--angle: calc(((var(--theta) * var(--i)) - var(--shift)) * 1deg);
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--rgb-background);
	width: var(--calc-slant-length);
	height: var(--calc-base-width);
	transform: rotate(var(--angle)) translateX(var(--calc-radius)) rotate(var(--calc-alpha)) rotateY(-90deg)
		rotateY(var(--calc-slant-angle));
	-webkit-clip-path: polygon(-50% -100%, 0% 100%, 100% 50%);
	clip-path: polygon(-50% -100%, 0% 100%, 100% 50%);
	transform-origin: 0 0;
}