* {
	padding: 0;
	margin: 0;
	/*   box-sizing: borderbox; */
	/*   outline:1px red solid; */
	
}

:root {
	/* top lip color */
	--lip1: rgb(184, 81, 81);
	/* top lip color w/ opacity */
	--lip2: rgba(184, 81, 81,0);
	/* top lip highlight */
	--lip3: rgb(232, 114, 114);
	/* blush center/main color  */
	--blush1: rgb(237, 159, 159);
	/* blush center opacity 1 */
	--blush2: rgba(237, 159, 159, .6);
	/* blush center none opacity  */
	--blush3: rgba(237, 159, 159, 0);
	/* eyeshadow crease color */
	--eye1: rgb(186, 117, 82);
	/* eyeshadow 1 w/ opacity */
	--eye2: rgba(186, 117, 82,0);
	/* very tip of the eyeshadow */
	--eye3: rgb(232, 189, 167);
	/* main eyeshadow */
	--eye4: rgb(224, 192, 175);
	/* iris light color */
	--iris1: rgb(168, 65, 49);
	/* iris darker outer color */
	--iris2: rgb(64, 1, 1);
	/* darker face color  */
	--face1: rgb(232, 176, 139);
	/*  lighter face color */
	--face2: rgb(246, 202, 172);
	/* face 2 w/ opacity */
	--face3: rgba(246, 202, 172, 0.7);
	/* face 2 w/ no opacity */
	--face4: rgba(246, 202, 172, 0);
	/* face 1 w/ no opacity */
	--face5: rgba(232, 176, 139);
	/* "white" */
	--face6: rgb(249, 219, 199);
	/* face 1 w/ lil opacity */
	--face7: rgba(232, 176, 139, 0.3);
	/* shadow */
	--face8: rgba(204, 130, 81, 0.3);

--bg1:black;
--bg2:white;
}

.color{
position: absolute;
width: 100vw;
height: 100vh;
}
 
.colors {
	z-index: 15;
	margin: 0.5rem 0 0 0.5rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	height: 90%;
}

/* #color1 {
	background-image: linear-gradient(white, pink, hotpink, fuchsia);
	color: turquoise;
	text-shadow: 2px 2px 3px purple;
}
#color2 {
	background-image: linear-gradient(lavender, lightcoral, red, firebrick);
	color: plum;
	text-shadow: 2px 2px 3px maroon;
}
#color3 {
	background-image: linear-gradient(cornsilk, burlywood, sienna, saddlebrown);
	color: darkseagreen;
	text-shadow: 2px 2px 3px darkred;
}

#skin1 {
	background-image: linear-gradient(oldlace, antiquewhite, moccasin);
	text-shadow: 1px 1px 3px hotpink;
}

#skin2 {
	background-image: linear-gradient(navajowhite, burlywood, peru);
	text-shadow: 1px 1px 3px palevioletred;
}

#skin3 {
	background-image: linear-gradient(sandybrown, peru, sienna);
	text-shadow: 1px 1px 3px hotpink;
	color: white;
}

#skin4 {
	background-image: linear-gradient(darksalmon, brown, maroon);
	text-shadow: 1px 1px 3px hotpink;
	color: white;
} */

button {
	transition-duration: .1s ;
	z-index: 15;
	/* padding: 0 10px; */
	/* height: 3rem;
	width: 3rem; */
	font-size: 1rem;
	border-radius: 0.5rem;
	border: none;
	margin: 3px;
}

button:hover{
	transform: scale(1.1,1.1);
}

button:active{
	transform: scale(.9,.9);
}

@keyframes eye {
	0% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(0, 0);
	}
	40% {
		transform: translate(15px, -5px);
	}
	80% {
		transform: translate(-20px, -4px);
	}
}

@keyframes bg {
	0% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

body {
	background-image:radial-gradient(
		var(--bg1, aliceblue),
		var(--bg2, violet)
			) ;
}

.contain {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	transform-origin: center;
	transform: scale(.9, .9);
}

#face {
	position: absolute;
	width: 450px;
	height: 500px;
	border-radius: 50%;
	background-image: linear-gradient(
		to right,
		var(--face1, rgb(255, 227, 194)),
		var(--face2, rgb(255, 246, 235))
	);
}

#nose {
	left: 110px;
	top: 200px;
	position: absolute;
	width: 100px;
	height: 150px;
	border-radius: 15px;

	border-width: 0px 0px 10px 3px;
	border-color: var(--face1, rgb(255, 227, 194));
	border-style: solid;

	transform: rotate(-5deg);

	background-image: linear-gradient(
		80deg,
		var(--face1, rgb(255, 227, 194)) 10%,
		var(--face3, rgba(255, 246, 235, 0.7)) 30%,
		var(--face4, rgba(255, 246, 235, 0)) 60%
	);

	filter: blur(1px);
}

#jaw1 {
	right: 0;
	bottom: 50px;
	position: absolute;
	width: 150px;
	height: 220px;
	border-radius: 40px;

	transform: skew(-5deg, -50deg);

	background-image: linear-gradient(
		100deg,
		var(--face7, rgba(255, 227, 194, 0.3)),
		var(--face2, rgb(255, 246, 235)),
		var(--face2, rgb(255, 246, 235))
	);

	border-width: 5px 0px 0px 1px;
	border-color: var(--face1, rgb(255, 227, 194));
	border-style: solid;

	filter: blur(2px);
}

#jaw2 {
	left: 55px;
	bottom: 50px;
	position: absolute;
	width: 500px;
	height: 275px;
	border-radius: 80px;

	transform: rotate(-45deg);

	background-image: linear-gradient(
		70deg,
		var(--face1, rgb(255, 227, 194)) 20%,
		var(--face3, rgba(255, 246, 235, 0.7)),
		var(--face4, rgba(255, 246, 235, 0)) 45%
	);
}

#chin {
	bottom: 10px;
	left: 10px;

	position: absolute;
	width: 100px;
	height: 100px;

	border-radius: 50%;
	background-image: radial-gradient(
		var(--face2, rgb(255, 246, 235)),
		var(--face5, rgba(255, 227, 194, 0))
	);
	border-right: 50px solid transparent;
}

.blush {
	position: absolute;
	top: 200px;
	right: 30px;

	z-index: 4;
	width: 100px;
	height: 100px;

	transform: skew(5deg, -40deg);

	background-image: linear-gradient(
		100deg,
		var(--blush1, rgb(252, 66, 206)),
		var(--blush2, rgba(252, 66, 206, 0.6)),
		var(--blush3, rgba(252, 66, 206, 0))
	);

	border-radius: 40px 0px 0px 50%;

	filter: blur(15px);
}

.mouth {
	position: absolute;
	bottom: 20px;
	left: 140px;

	width: 150px;
	height: 100px;

	filter: blur(2px);
}

.lip-left {
	position: absolute;
	top: 10px;
	left: 10px;

	width: 50px;
	height: 50px;
	border-radius: 60%;

	z-index: 1;

	border-color: var(--face6, white);
	border-width: 7px 0px 0px 3px;
	border-style: solid;

	transform: skew(-10deg, 10deg);

	background-image: linear-gradient(
		to bottom,
		var(--lip3, rgb(255, 20, 169)),
		var(--lip1, rgb(199, 0, 192)) 60%,
		var(--lip2, rgba(199, 0, 192, 0)) 90%
	);

	filter: blur(1px);
}

.lip-right {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 50px;

	width: 50px;
	height: 50px;
	border-radius: 60%;

	border-color: var(--face6, white);
	border-width: 7px 0px 0px 0px;
	border-style: solid;

	transform: skew(-10deg, 0deg);

	background-image: linear-gradient(
		to bottom,
		var(--lip3, rgb(255, 20, 169)),
		var(--lip1, rgb(199, 0, 192)) 60%,
		var(--lip2, rgba(199, 0, 192, 0)) 90% 90%
	);

	filter: blur(1px);
}

.lip-top {
	z-index: 0;
	top: 0px;
	left: -10px;

	position: absolute;
	filter: blur(2px);

	width: 80px;
	height: 30px;

	transform: rotate(-10deg) skew(25deg, -10deg);

	border-bottom: 30px solid var(--lip1, rgb(199, 0, 192));
	border-left: 25px solid transparent;
	border-right: 20px solid transparent;
}

.eye {
	position: absolute;
	right: 70px;
	top: 130px;

	width: 200px;
	height: 150px;

	transform: rotate(-20deg);
}

.eyelid-top {
	left: 20px;
	height: 50px;
	width: 150px;
	position: absolute;

	border-style: solid;
	border-width: 20px 0px 0px 0px;
	border-color: var(--eye1, rgb(38, 136, 222));

	background-image: linear-gradient(
		40deg,
		var(--eye3, rgb(177, 252, 250)),
		var(--eye4, rgb(3, 248, 252)),
		var(--eye1, rgb(38, 136, 222))
	);

	transform: skewY(-10deg);

	border-radius: 100px 90px 50% 0px;

	filter: blur(1px);
}

.eyeshadow {
	top: -10px;
	right: 0px;

	width: 80px;
	height: 70px;

	z-index: 3;
	position: absolute;
	border-radius: 50%;

	background-image: linear-gradient(
		to left,
		var(--eye1, rgb(38, 136, 222)),
		var(--eye2, rgba(38, 136, 222, 0))
	);
}

.eyeliner {
	bottom: 0;
	left: 0;
	height: 100px;
	width: 180px;
	position: absolute;

	z-index: 4;

	transform: rotate(180deg);

	background: rgba(0, 0, 0, 0);

	border-style: solid;
	border-color: black;
	border-width: 20px 0px 0px 0px;
	border-radius: 100px 20px;

	filter: blur(1.5px);
}

.eyeliner-tip {
	position: absolute;
	bottom: -4px;
	left: -20px;

	z-index: 4;

	transform: rotate(-18deg);

	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 30px solid black;
	border-bottom: 15px solid transparent;
}

.eye-bg {
	top: 10px;
	left: 20px;

	width: 100px;
	height: 90px;
	position: absolute;

	z-index: 3;

	border-radius: 0% 100% 0% 100%;
	transform: rotate(-45deg) skewY(10deg);

	background-image: radial-gradient(rgb(245, 235, 228) 30%, rgb(255, 198, 181));

	/*   z-index: 3; */
	filter: blur(2px);

	border-width: 0px 0px 5px 0px;
	border-color: black;
	border-style: solid;
}

.eyeliner2 {
	right: -30px;
	top: 5px;
	position: absolute;

	z-index: 3;
	transform: rotate(-5deg) skewY(-30deg) skewX(-30deg);

	border-radius: 100%;
	filter: blur(5px);

	width: 100px;
	height: 56px;

	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 1) 30%,
		rgba(0, 0, 0, 0) 90%
	);
}

#iris {
	position: absolute;

	height: 45px;
	width: 45px;
	left: 45px;
	top: 35px;
	z-index: 3;

	border-radius: 50%;

	background-image: radial-gradient(
		rgb(255, 255, 255),
		rgb(0, 0, 0) 13px,
		var(--iris1, rgb(168, 65, 49)) 14px,
		var(--iris2, rgb(64, 1, 1))
	);

	border: black solid 1px;
	/*   transform:skewY(10deg); */

	animation: eye 20s infinite;
}

.eyebrow1 {
	top: 120px;
	right: 180px;

	position: absolute;
	background: black;

	height: 15px;
	width: 120px;

	border-radius: 4px 0px 0px 4px;
	border-width: 2px 0px 3px 0px;
	border-color: var(--face6, white);
	border-style: solid;

	filter: blur(2px);
	transform: rotate(-35deg);
}

.eyebrow {
	transform: skewY(20deg);

	top: 18px;
	left: 120px;

	position: absolute;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 100px solid;
	border-bottom: 10px solid transparent;
}

.hair {
	top: -50px;
	left: -90px;
	/*   outline:solid red 1px; */

	position: absolute;
	width: 550px;
	height: 500px;
}

.bang {
	position: absolute;
	width: 300px;
	height: 500px;

	transform: skew(-10deg, 0deg) rotate(-10deg);

	border-radius: 200px 15px 100% 0px;

	background-image: linear-gradient(
		15deg,
		rgb(255, 251, 199) 20%,
		rgb(255, 254, 235) 32%,
		rgb(255, 255, 255) 50%,
		rgb(255, 255, 255) 51%,
		rgb(255, 254, 235) 58%,
		rgb(255, 251, 199) 80%
	);

	filter: drop-shadow(10px 10px 10px var(--face8, rgba(187, 142, 112, 0.3)));
}

.hair-part {
	z-index: -1;
	position: absolute;
	top: -19px;
	right: 50px;
	width: 220px;
	height: 180px;

	border-radius: 0px 100px;

	background-color: rgb(255, 251, 199);
}

.hair-bridge {
	z-index: 2;
	width: 200px;
	height: 100px;

	top: -17px;
	right: 100px;

	border-radius: 30px 100px;

	position: absolute;
	background-color: rgb(255, 251, 199);
}

.mole {
	position: absolute;
	bottom: 100px;
	right: 120px;
	width: 15px;
	height: 15px;

	z-index: 4;

	border-radius: 50%;

	background-color: black;
	filter: blur(5px);
}

.ear {

	filter: blur(1px);
	right: -80px;
	top: 120px;

	position: absolute;
	width: 125px;
	height: 200px;
}

.ear-top {
	position: absolute;

	width: 110px;
	height: 150px;

	border-radius: 50%;
	border-color: var(--face1, rgb(255, 227, 194));
	border-width: 10px 10px 0px 0px;
	border-style: solid;

	background-color: var(--face2, rgb(255, 246, 235));
}

.earlobe {
	z-index: 3;
	left: 15px;
	bottom: 0;
	position: absolute;

	width: 80px;
	height: 100px;

	border-radius: 50%;

	background-color: var(--face2, rgb(255, 246, 235));
	border-color: var(--face1, rgb(255, 227, 194));
	border-width: 0px 5px 8px 0px;
	border-style: solid;

	transform: rotate(20deg) skew(0deg, -10deg);
}

.inner-ear {
	bottom: 70px;
	left: 10px;
	z-index: 4;

	transform: rotate(90deg);

	position: absolute;
	height: 0;
	width: 15px;
	border-bottom: 20px solid var(--face8 , rgba(187, 142, 112, 0.3));
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;

	filter: blur(7px);
}

.earline {
	top: 20px;
	right: 15px;

	z-index: 3;
	position: absolute;
	height: 100px;
	width: 70px;

	border-radius: 50%;
	background-color: var(--face2, rgb(255, 246, 235));

	border-top: var(--face1, rgb(255, 227, 194)) 3px solid;
	border-right: var(--face1, rgb(255, 227, 194)) 2px solid;
	border-bottom: var(--face1, rgb(255, 227, 194)) 2px solid;

	filter: blur(1px);
}

.acc1{
	top: 9rem;
	position: absolute;
	/* outline: 3px red solid; */
	height: 10rem;
	width: 7rem;
}

#pearl{
	top:0;
	left: 5px;
	position: absolute;
	display: none; 
	padding: 2rem;
	z-index:4 ;
	
	filter: blur(1px);

	border-radius: 50%;
	background-image: radial-gradient(rgb(255, 253, 250),rgb(236, 236, 222),rgb(215, 219, 168));

	border-color:rgb(228, 225, 213) ;
	border-style: solid;
	border-width: 0 4px 1px 0 ;
}

#star{

	top: 0;
	left: 0px;
	width:1rem;
	height: 1rem;
	clip-path: polygon(50% 0%, 61% 36%, 99% 44%, 62% 58%, 50% 98%, 38% 58%, 0 44%, 38% 37%);
	position: absolute;
	display: none; 
	padding: 2rem;
	z-index:4 ;
	
	filter: blur(2px);

	border-radius: 50%;
	background-image: radial-gradient(rgb(255, 247, 217),rgb(255, 212, 51),rgb(255, 207, 50), rgb(224, 177, 0));

	border-color:rgb(228, 225, 213) ;
	border-style: solid;
	border-width: 0 4px 1px 0 ;
}

#diamond{
	transition: .5s;
	top: 2rem;
	left: 0;
	position: absolute;
	display: none;
	z-index: 4;

	filter: blur(1px);
	flex-direction: column;
	align-items: center;


	height: 100%;
	width: 80%;

}

.dot{
	margin: 3px;
	position: relative;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-image: radial-gradient(rgb(73, 0, 156),rgb(0, 0, 0));
}

.rhomb{
	filter: blur(4px);
	margin: 3px;
	position: relative;
	width: 4rem;
	height: 6rem;
	clip-path: polygon(50% 0%, 75% 40%, 51% 100%, 25% 40%);
	background-image: radial-gradient(rgb(247, 239, 252),
	rgb(189, 208, 214),rgb(44, 33, 51));
}

.swing:hover{
	transform: rotate(-10deg) translate(10deg);
}