:root {
	--brow-y-offset: -10px;
	--brow-x-offset: 0px;
	--brow-scale: 1;
	--brow-rotation: 0deg;

	--eye-y-offset: -1px;
	--eye-x-offset: 0px;
	--eye-scale: 1;
	--eye-rotation: 0deg;

	--mouth-y-offset: 0px;
	--mouth-x-offset: 0px;
	--mouth-scale: 1;
	--mouth-rotation: 0deg;

	--anim-speed: 100ms;

  
}
#face-svg {
  --c-top: #efdd3e;
	/* --c-middle: rgb(255, 255, 255); */
	--c-bottom: #e2c058;
}

ellipse.brow,
path.brow {
	transform-origin: 50% 10%;
	transition: transform var(--anim-speed, 200ms) ease;
}

ellipse.brow.left,
path.brow.left {
	transform: translate(var(--brow-x-offset, 0px), var(--brow-y-offset, 0px))
		scale(var(--brow-scale, 1)) rotate(var(--brow-rotation, 0deg));
}
ellipse.brow.right,
path.brow.right {
	transform: translate(
			calc(var(--brow-x-offset, 0px) * -1),
			var(--brow-y-offset, 0px)
		)
		scale(var(--brow-scale, 1)) rotate(calc(var(--brow-rotation, 0deg) * -1));
}
path.eye,
g.eye {
	transform-origin: 50% 50%;
	transition: transform var(--anim-speed, 200ms) ease;
}

path.eye.left,
g.eye.left {
	transform: translate(var(--eye-x-offset, 0px), var(--eye-y-offset, 0px))
		scale(var(--eye-scale, 1)) rotate(var(--eye-rotation, 0deg));
}
path.eye.right,
g.eye.right {
	transform: translate(
			calc(var(--eye-x-offset, 0px) * -1),
			var(--eye-y-offset, 0px)
		)
		scale(var(--eye-scale, 1)) rotate(calc(var(--eye-rotation, 0deg) * -1));
}

g.mouth {
	transform-origin: 50% 60%;
	transform: translate(var(--mouth-x-offset), var(--mouth-y-offset))
		scale(var(--mouth-scale, 1)) rotate(calc(var(--mouth-rotation, 0deg) * -1));
}