/* 
 Best viewed in Full mode (Tested on Chrome and FireFox)
 CSS Only 3D KN95-Face Mask with 3D Camera Simulation.
 This 3D object created and processed using CSS and
 powered by a few lines of JavaScript.
 */

html,
body {
	padding: 0;
	margin: 0;
	background-color: white;
	font-family: 'Arial', sans-serif;
	font-size: 10px;
	width: 100vw;
	height: 100vh;
	display: block;
	scrollbar-color: rgb(0, 100, 200) rgb(20, 25, 30);
	scrollbar-width: thin;
}

body::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#fff, #000);
	background-size: 100vw 100vh;
	display: block;
	opacity: 0.4;
}

/* enhancements */
.noscroll {
	overflow: hidden;
}

.noanimations .uniform,
.noanimations .object3d,
.noanimations .extension,
.noanimations #controls {
	transition: none;
	transition-property: none;
	transition-duration: 0s;
	transition-timing-function: linear;
}

.noantialiasing [t3d],
.noantialiasing [pr-ant] div {
	box-shadow: none;
}

.controls-hidden .uniform {
	left: calc(var(--ptx, 156px) - 156px);
}

/* maximum space to scale the scene uniformly */
.uniform {
	position: absolute;
	left: var(--ptx, 156px); /* sidebar width */
	top: var(--pty, 0px); /*45,10*/
	width: 100vw;
	height: 100vh;
	transform: scale(var(--s, 1));
	display: flex;
	align-items: center;
	overflow: visible;
	transition: transform ease 1s;
	transition-property: transform, left, top; /* bad idea! */
	will-change: transform, left, top; /* render optimization */
}

/* represent the object in 3D space */
.object3d {
	top: 0px;
	position: relative;
	transform: perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--z, 0deg))
		translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
	--path-max-rotate: calc(360deg + var(--z, 0deg));
	transform-style: preserve-3d;
	margin: auto;
	transition: transform ease 1s; /* don't animate top, done! */
	will-change: transform; /* render optimization */
}

.object3d.rotate {
	animation: autorotate linear var(--rs, 2s) forwards infinite;
}

@keyframes autorotate {
	100% {
		transform: perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg))
			rotateZ(var(--path-max-rotate)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
	}
}

/* anti-aliasing */
[ant] {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
}

[pr-ant] div {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
}

/* parent 3D */
[t3d] {
	transform-style: preserve-3d;
}

[t3dc],
[t3dc] div {
	transform-style: preserve-3d;
}

/* children 3D */
[t3dp]::before,
[t3dp]::after {
	transform-style: preserve-3d;
}

/* child 3D */
[t3db]::before {
	transform-style: preserve-3d;
}
[t3da]::after {
	transform-style: preserve-3d;
}

/* Default Variables for easy access */
.default-variables {
	--grinding-ratio: 35%;
	--angle-of-base: 41deg;
	--angle-of-cone: 49.4deg; /*60.4deg*/
	--angle-of-cone-b: 49.4deg;
	--angle-of-strip: 2deg;
	--angle-of-low: 35deg;

	/* position, size */
	--strip-x: 8px;
	--strip-y: 16px;
	--mz: 254px;
	--oval-shift: -17px;
	--oval-radius: 350px;
	--angle-height-1: 160px; /*14px*/
	--angle-height-2: 160px;
	--base-width: 240px;
	--base-height: 190px;

	/* L.H.S */
	--color-triangle-top-1: #fff;
	--color-triangle-bottom-1: #f6f6f6;
	--color-base-left-1: #fff;
	--shade-cones-top: rgba(0, 0, 0, 0.15);

	/* R.H.S */
	--color-triangle-top-2: #e0e0e0;
	--color-triangle-bottom-2: #d3d3d3;
	--color-base-right-1: #dbdbdb;
	--shade-cones-bottom: rgba(0, 0, 0, 0);

	/* BOTH */
	--shade-cage: rgba(0, 0, 0, 0.1);
}

/* Main */
.main-stage {
	position: relative;
	top: 0;
	left: 0;
	width: 246px; /* it's kinda shadow size ;) */
	height: 305px;
}

.main-stage::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.16);
	filter: blur(40px);
	border-radius: 40%;
	backface-visibility: hidden;
}

.main-rect {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateZ(var(--mz)) rotateX(-90deg);
	width: var(--base-width);
	height: var(--base-height);
}

.main-rect::before,
.main-rect::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 0;
	width: 11px;
	height: 100%;
	background-color: #bbb;
	background-image:
		linear-gradient(0deg, rgba(255, 255, 255, 0.7) 2px, transparent 1px),
		linear-gradient(0deg, rgba(0, 0, 0, 0.13) 2px, transparent 1px);
	background-size:
		2px 2px,
		1px 4px;
	background-position:
		6px 0,
		0 0;
	background-repeat: repeat-y, repeat;
	transform: translateX(-100%);
	/*clip-path: polygon(5% 5%, 100% 0, 100% 100%, 5% 95%);*/
	border-radius: 20px 0px 0px 20px;
	backface-visibility: hidden;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}

.main-rect::after {
	background-color: #d5d5d5;
	background-image:
		linear-gradient(0deg, rgba(255, 255, 255, 0.7) 2px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.4) 2px, transparent 1px);
	transform: translateX(-100%) rotateX(-180deg);
}

.main-rect .mass {
	position: absolute;
	left: 0;
	top: 0;
	width: 76%;
	height: 100%;
}

.main-rect .oval-gen {
	position: absolute;
	left: 75%;
	top: 0;
	width: 49%;
	height: 100%;
	overflow: hidden;
}

.main-rect .oval {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 129%;
	border-radius: 0px var(--oval-radius) var(--oval-radius) 0;
	transform: translate(var(--oval-shift), -50%);
	overflow: hidden;
}

/*
.main-rect .oval-gen {
    position: absolute;
    left: 75%;
    top: 0;
    width: 52%;
    height: 100%;
    overflow: hidden;
    border-radius: 0%;
}
.main-rect .oval {
    position: absolute;
    left: 0;
    top: 49%;
    width: 199%;
    height: 129%;
    border-radius: 39% 61% 68% 32% / 56% 61% 39% 44%;
    transform: translate(-131px, -50%) rotate(-23deg);
    overflow: hidden;
}
*/

.main-rect .side {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: rotateY(var(--a));
	transform-origin: 0% 50%;
}

.main-rect .side-left {
	--a: var(--angle-of-base);
}

.main-rect .side-right {
	--a: calc(var(--angle-of-base) * -1);
}

.side .over-top {
	top: 0;
	height: var(--angle-height-1);
	transform: translateY(-100%) rotateX(var(--node));
	transform-origin: 0% 100%;
}

.side .over-bottom {
	bottom: 0;
	height: var(--angle-height-2);
	transform: translateY(100%) rotateX(var(--node));
	transform-origin: 0% 0%;
}

.side .over-top,
.side .over-bottom {
	position: absolute;
	left: 0;
	width: 100%;
}

.side-left .over-top {
	--node: calc(var(--angle-of-cone) * -1);
}

.side-right .over-top {
	--node: var(--angle-of-cone);
}

.side-right .over-bottom {
	--node: calc(var(--angle-of-cone-b) * -1);
}

.side-left .over-bottom {
	--node: var(--angle-of-cone-b);
}

.cone1,
.cone2 {
	position: absolute;
	left: 0;
	width: var(--grinding-ratio);
	height: 60%;
	background: var(--color-triangle-top-1);
}

.side-left .cone1,
.side-left .cone2 {
	background: var(--color-triangle-bottom-1);
}

.cone1 {
	bottom: 0;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.cone2 {
	top: 0;
	clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
}

.cone1-finish,
.cone2-finish {
	position: absolute;
	left: var(--grinding-ratio);
	width: calc(100% - var(--grinding-ratio));
	height: 60%;
	background: var(--color-triangle-top-1);
}

.side-left .cone1-finish,
.side-left .cone2-finish {
	background: var(--color-triangle-bottom-1);
}

.cone1-finish {
	bottom: 0;
	clip-path: polygon(0% 0, 0 100%, 100% 100%);
}

.cone2-finish {
	top: 0;
	clip-path: polygon(100% 0%, 0% 0, 0% 100%);
}

.cones.cc {
	display: block;
	backface-visibility: hidden;
	transform: translateZ(0px);
}

.side-right .cones.cc {
	backface-visibility: visible;
	transform: translateZ(-1px);
}

.side-right .mass.cc {
	backface-visibility: visible;
	transform: translateZ(-1px);
}

.oval-gen.cc {
	transform: translateZ(1px);
	backface-visibility: hidden;
}

.side-right .oval-gen.cc {
	backface-visibility: visible;
	transform: translateZ(-1px);
}

/* colors */
.side-left .over-top .cones {
	background-color: var(--color-triangle-top-1);
}
.side-right .over-top .cones {
	background-color: var(--color-triangle-top-2);
}

.side-left .over-bottom .cones {
	background-color: var(--color-triangle-bottom-1);
}
.side-right .over-bottom .cones {
	background-color: var(--color-triangle-bottom-2);
}

.main-rect .oval,
.main-rect .mass {
	background-color: var(--color-base-left-1);
}
.main-rect .side-right .oval,
.main-rect .side-right .mass {
	background-color: var(--color-base-right-1);
}

/* apply thread effect */
.side-left .over-top .cones,
.side-left .over-bottom .cones,
.side-right .over-top .cones,
.side-right .over-bottom .cones,
.main-rect .oval,
.main-rect .mass {
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 2px),
		linear-gradient(0deg, rgba(0, 0, 0, 0.01) 1px, transparent 2px);
	background-size:
		4px 4px,
		4px 4px,
		4px 4px;
}

/* apply clone shades */
.side-right .over-top .cones.cc,
.side-left .over-top .cones.cc {
	background-image:
		linear-gradient(var(--shade-cones-top), var(--shade-cones-top)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.02) 2px, transparent 2px),
		linear-gradient(0deg, rgba(0, 0, 0, 0.01) 2px, transparent 2px);
	background-size:
		4px 4px,
		4px 4px,
		4px 4px;
}

.side-right .over-bottom .cones.cc,
.side-left .over-bottom .cones.cc {
	background-image:
		linear-gradient(var(--shade-cones-bottom), var(--shade-cones-bottom)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.02) 2px, transparent 2px),
		linear-gradient(0deg, rgba(0, 0, 0, 0.01) 2px, transparent 2px);
	background-size:
		4px 4px,
		4px 4px,
		4px 4px;
}

.oval-gen.cc .oval,
.mass.cc {
	background-image:
		linear-gradient(var(--shade-cage), var(--shade-cage)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.014) 2px, transparent 2px),
		linear-gradient(0deg, rgba(0, 0, 0, 0.01) 2px, transparent 2px);
	background-size:
		4px 4px,
		4px 4px,
		4px 4px;
}

.mass.cc {
	backface-visibility: hidden;
}

/* strip */
.strip {
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0.12) 10px, transparent 6px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.56) 10px, transparent 0%);
	background-repeat: repeat-x;
	background-size: 16px 5px;
	background-position:
		0 0,
		0 5px;
}

.cc .strip {
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.4) 10px, transparent 6px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.16) 10px, transparent 0%);
}

.strip1 {
	position: absolute;
	left: var(--strip-x);
	top: var(--strip-y);
	width: 94%;
	height: 6px;
	transform: rotate(var(--angle-of-strip));
}

.strip2 {
	position: absolute;
	left: var(--strip-x);
	bottom: var(--strip-y);
	width: 79%;
	height: 6px;
	transform: rotate(calc(var(--angle-of-strip) * -1));
}

/*
.oval::before{
content: "";
position: absolute;
left: -122px;
top: 1px;
width: 194%;
height: 100%;
border-radius: 50%;
border: 2.5px dashed rgba(0,0,0,0.2);
transform: rotate(17deg);
}
*/

/* This might be the best hack for curved borders :D */
.oval::before {
	content: '';
	position: absolute;
	left: -122px;
	top: 3px;
	width: 194%;
	height: 98%;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(0,0,0,0.2)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
	background-position: left center;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.side-right .cc .oval::before {
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(255,255,255,0.4)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
}

.over-top .cone1-finish::before,
.over-bottom .cone2-finish::before {
	content: '';
	position: absolute;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.17) 8px, transparent 6px);
	background-repeat: repeat-x;
	background-size: 16px 5px;
	background-position: 0px 0;
	right: 10px;
	top: 50%;
	width: 100%;
	height: 4px;
}

.over-top .cone1-finish::before {
	transform: translateY(3px) rotate(31deg);
}

.over-bottom .cone2-finish::before {
	transform: translateY(-6px) rotate(-31deg);
}

.side-right .over-top .cc.cone1-finish::before,
.side-right .over-bottom .cc.cone2-finish::before {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 8px, transparent 6px);
}

/* conic outlines */

.over-top .cone1::before {
	content: '';
	position: absolute;
	left: -3px;
	top: -2px;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(132deg, #aaa 68px, transparent 56px);
}

.over-bottom .cone2::before {
	content: '';
	position: absolute;
	left: 75px;
	bottom: -38px;
	width: 2px;
	height: 101%;
	background: rgba(0, 0, 0, 0.22);
	transform: rotate(-42deg) translateY(-62px);
}

/* handles */
.low-cone {
	position: absolute;
	left: 50px;
	bottom: 38px;
	width: 37%;
	height: 10px;
	background: #585050;
	border-radius: 0px 10px 10px 0px;
	opacity: 0.6;
}

.low-cone::before {
	content: '';
	position: absolute;
	left: 54%;
	top: 50%;
	width: calc(100% + 1px);
	height: calc(100% + 14px);
	border: 2px dotted #aaa;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border-left: 0;
	display: block;
}

.side-left .low-cone {
	transform: translateZ(-1px) rotate(var(--angle-of-low));
	background: #666565;
}
.side-right .low-cone {
	transform: translateZ(1px) rotate(var(--angle-of-low));
}

/* hands */
.rig,
.rig-s {
	position: absolute;
	right: 43px;
	top: 50%;
	width: 145px;
	height: 153px;
	border: 7px solid #5767c7;
	border-left-color: transparent;
	border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
	transform: translate(100%, -50%);
	z-index: 0;
}

.side-left .rig {
	transform: translate3d(100%, -50%, 1px);
}
.side-right .rig {
	transform: translate3d(100%, -50%, 0px);
}

.rig-s {
	border: 0;
	border-radius: 0;
	z-index: 2;
	right: 32px;
}

.rig-s::before,
.rig-s::after {
	content: '';
	position: absolute;
	left: 0;
	width: 14px;
	height: 14px;
	background-color: #5767c7;
	background-image:
		linear-gradient(-25deg, rgba(255, 255, 255, 0.1) 25%, transparent 75%),
		linear-gradient(0deg, rgba(255, 255, 255, 0.1) 75%, transparent 25%);
	background-size:
		2px 6px,
		2px 6px;
	border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
	display: block;
	opacity: 0.5;
}

.rig-s::before {
	top: -4px;
}
.rig-s::after {
	bottom: -4px;
	border-radius: 30% 70% 77% 23% / 77% 47% 53% 23%;
}

:root {
	--controls-active: linear-gradient(0deg, rgba(0, 100, 200, 0.4), rgba(0, 100, 200, 0.4));
	--controls-active-warn: linear-gradient(0deg, rgba(217, 54, 0, 0.4), rgba(217, 54, 0, 0.4));
}

/* controls */
#controls {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: black;
	display: block;
	padding: 4px 0;
	color: white;
	height: 100%;
	transition-property: transform;
	transition-duration: 0.64s;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
	box-shadow: 4px 0 10px 0px rgba(0, 0, 0, 0.2);
}

/* additional controls */
button.disabled {
	opacity: 0.4;
	pointer-events: none;
}

button.board-borders::before {
	content: 'Hide ';
}
.noborders button.board-borders::before {
	content: 'Show ';
}

button.anim-boost::before {
	content: 'Reduce ';
}
.noanimations button.anim-boost::before {
	content: 'Enable ';
}

.noborders #controls button.board-borders {
	background-image: var(--controls-active);
}

.highlighted #controls button.support-lines {
	background-image: var(--controls-active);
}

.noanimations #controls button.anim-boost {
	background-image: var(--controls-active-warn);
}

.noscroll #controls button.body-scroll {
	background-image: var(--controls-active-warn);
}

.noantialiasing #controls button.no-anti-aliasing {
	background-image: var(--controls-active-warn);
}

.rotating #controls button.spin360,
.rotating .extension button.spin360 {
	background-image: var(--controls-active);
}

/* check for board type */
button.body-scroll::before {
	content: 'Disable ';
}
.noscroll button.body-scroll::before {
	content: 'Enable ';
}

/* controls makeup */
#controls .title {
	position: relative;
	padding: 6px 8px;
	display: block;
	margin: 2px 0;
}

#controls button,
.extension button {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 0;
	position: relative;
	font-size: 10px;
	padding: 6px 14px;
	margin: 2px auto;
	width: 48%;
	/*outline:none;*/
	outline-offset: -4px;
}

#controls button.ehide::before {
	content: 'Hide ';
}

#controls button:hover,
.extension button:hover {
	background: rgba(255, 255, 255, 0.2);
}
#controls button:active,
.extension button:active {
	background: rgba(255, 255, 255, 0.15);
}

#controls.hide {
	transform: translateX(-100%);
}

#controls.hide button.ehide {
	background-image: var(--controls-active);
}

#controls.hide button.ehide::before {
	content: 'Show ';
}

label {
	display: block;
	padding: 4px 8px;
}

label > span {
	display: inline-block;
	color: white;
	width: 20px;
	height: 12px;
	line-height: 12px;
	position: relative;
	left: 0px;
	top: -2px;
	opacity: 0.7;
}

label:hover > span {
	opacity: 1;
}

label > span:last-child {
	width: 50px;
	text-align: right;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	width: 200px;
	height: 12px;
	background: rgb(20, 20, 20);
}

/* range makeup for Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 15px;
		height: 12px;
		cursor: ew-resize;
		background: #434343;
	}

	input[type='range']:hover::-webkit-slider-thumb {
		background: rgb(0, 110, 210);
	}

	input[type='range']:active::-webkit-slider-thumb {
		background: rgb(0, 160, 255);
	}

	input[type='range']:hover,
	input[type='range']:active {
		background: rgb(30, 30, 30);
	}
}

/* range makeup for FireFox */
input[type='range']::-moz-range-thumb {
	appearance: none;
	width: 15px;
	height: 12px;
	background: rgb(0, 100, 200);
	border: 0;
	border-radius: 0;
	cursor: ew-resize;
}

input[type='range']:hover::-moz-range-thumb {
	background: rgb(0, 110, 210);
}

input[type='range']::-moz-range-thumb:hover,
input[type='range']::-moz-range-thumb:active {
	background: rgb(0, 160, 255);
}

input[type='range']::-moz-range-progress {
	height: 12px;
	background: rgb(0, 40, 80);
}

input[type='range']:hover::-moz-range-progress {
	background: rgb(0, 50, 100);
}

/* extensions */
.extension {
	position: fixed;
	left: 292px;
	top: 0px;
	width: 36px;
	background: black;
	box-shadow: 4px 0 10px 0px rgba(0, 0, 0, 0.2);
	font-size: 0;
	transition-property: left, transform;
	transition-duration: 0.64s;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
	transform: translateX(-100%);
	padding: 0;
	display: block;
}

.extension button {
	width: 100%;
	height: 32px;
	padding: 0;
	margin: 0;
}

.controls-hidden .extension {
	left: 0px;
	transform: translateX(0%);
}

/* footer */
@media (min-height: 500px) {
	.footer {
		display: none;
	}
}

.footer {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 60px;
	display: block;
	white-space: nowrap;
	transform: translateX(-50%);
	background: black;
}

.footer a {
	padding: 0 14px;
	display: inline-block;
	text-decoration: none;
	font-size: 0;
	opacity: 0.6;
	position: relative;
}

.footer .twitter {
	top: 2px;
}

.footer a:hover {
	opacity: 1;
}

.footer .twitter svg {
	width: 28px; /* 2% margin extended */
	height: 28px;
	fill: white;
}

.footer .dribbble svg {
	width: 24.5px;
	height: 24.5px;
	overflow: visible;
}

.footer .dribbble svg path {
	fill: white !important;
}