body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 16px;
	--wrapper-width: 850px;
}

.wrapper {
	width: 100%;
	height: 100%;
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background-color: #000; */
	/* background-image: radial-gradient(circle at center center, transparent 0%,rgb(0,0,0) 85%),
					  linear-gradient(78deg, rgba(192, 192, 192,0.05) 0%, rgba(192, 192, 192,0.05) 50%,rgba(60, 60, 60,0.05) 50%, rgba(60, 60, 60,0.05) 100%),
					  linear-gradient(227deg, rgba(97, 97, 97,0.05) 0%, rgba(97, 97, 97,0.05) 50%,rgba(52, 52, 52,0.05) 50%, rgba(52, 52, 52,0.05) 100%),
					  linear-gradient(240deg, rgba(98, 98, 98,0.05) 0%, rgba(98, 98, 98,0.05) 50%,rgba(249, 249, 249,0.05) 50%, rgba(249, 249, 249,0.05) 100%),
					  linear-gradient(187deg, rgba(1, 1, 1,0.05) 0%, rgba(1, 1, 1,0.05) 50%,rgba(202, 202, 202,0.05) 50%, rgba(202, 202, 202,0.05) 100%),
					  linear-gradient(101deg, rgba(61, 61, 61,0.05) 0%, rgba(61, 61, 61,0.05) 50%,rgba(254, 254, 254,0.05) 50%, rgba(254, 254, 254,0.05) 100%),
					  linear-gradient(176deg, rgba(237, 237, 237,0.05) 0%, rgba(237, 237, 237,0.05) 50%,rgba(147, 147, 147,0.05) 50%, rgba(147, 147, 147,0.05) 100%),
					  linear-gradient(304deg, rgba(183, 183, 183,0.05) 0%, rgba(183, 183, 183,0.05) 50%,rgba(57, 57, 57,0.05) 50%, rgba(57, 57, 57,0.05) 100%),
					  radial-gradient(circle at center center, hsl(351,4%,12%),hsl(351,4%,12%)); */
	background-image: linear-gradient(44deg, rgba(84, 153, 197, 0.04) 0%, rgba(84, 153, 197, 0.04) 50%,rgba(43, 252, 236, 0.04) 50%, rgba(43, 252, 236, 0.04) 100%),linear-gradient(264deg, rgba(197, 57, 189, 0.04) 0%, rgba(197, 57, 189, 0.04) 50%,rgba(167, 106, 179, 0.04) 50%, rgba(167, 106, 179, 0.04) 100%),linear-gradient(323deg, rgba(76, 28, 237, 0.04) 0%, rgba(76, 28, 237, 0.04) 50%,rgba(115, 208, 165, 0.04) 50%, rgba(115, 208, 165, 0.04) 100%),linear-gradient(236deg, rgba(241, 1, 111, 0.04) 0%, rgba(241, 1, 111, 0.04) 50%,rgba(7, 173, 72, 0.04) 50%, rgba(7, 173, 72, 0.04) 100%),linear-gradient(296deg, rgba(124, 241, 241, 0.04) 0%, rgba(124, 241, 241, 0.04) 50%,rgba(26, 63, 229, 0.04) 50%, rgba(26, 63, 229, 0.04) 100%),linear-gradient(96deg, rgba(87, 80, 82, 0.04) 0%, rgba(87, 80, 82, 0.04) 50%,rgba(104, 13, 102, 0.04) 50%, rgba(104, 13, 102, 0.04) 100%),linear-gradient(254deg, rgba(127, 190, 93, 0.04) 0%, rgba(127, 190, 93, 0.04) 50%,rgba(120, 35, 199, 0.04) 50%, rgba(120, 35, 199, 0.04) 100%),linear-gradient(353deg, rgba(227, 212, 206, 0.04) 0%, rgba(227, 212, 206, 0.04) 50%,rgba(55, 215, 100, 0.04) 50%, rgba(55, 215, 100, 0.04) 100%),linear-gradient(218deg, rgba(32, 99, 251, 0.04) 0%, rgba(32, 99, 251, 0.04) 50%,rgba(230, 154, 131, 0.04) 50%, rgba(230, 154, 131, 0.04) 100%),linear-gradient(266deg, rgb(101, 254, 171),rgb(119, 206, 247));
}

.pieces {
	position: relative;
	width: var(--wrapper-width);
	height: var(--wrapper-width);
	perspective: 100rem;
	transform-style: preserve-3d;
	perspective-origin: center center;
}

.piece {
	position: absolute;
	/* background: url(../bg.jpg) no-repeat;
	background-size: var(--wrapper-width) var(--wrapper-width); */
	/* border: 1px solid #ffffff; */
	background-color: transparent;
	box-shadow: 0 0 20px 6px rgba(0, 0, 0, .4);
	transition: .3s ease;
}

.piece-child {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../bg.jpg) no-repeat;
	background-size: var(--wrapper-width) var(--wrapper-width);
}

.circle .piece-child {
	clip-path: circle(50%);
}

.polygon .piece-child {
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.heart .piece-child {
	-webkit-mask: url(../heart.svg) no-repeat center;
	;
	mask: url(../heart.svg) no-repeat center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.hide .piece-child {
	display: none;
}


.fade-in {
	transform: translateX(-850px) scale(0);
	transition: 0s;
}

.mui-input-row {
	position: fixed;
	left: 0;
	top: 0;
	color: #fff;
}