body,
html {
	height: 100%;
	padding: 0;
	margin: 0;
	background: #fedc56;
	--ladybug-body-color: radial-gradient(#000 60%, #ccc);
	--ladybug-headMarks-color: radial-gradient(#fff 30%, #ccc);
	--ladybug-leftShell-color: linear-gradient(to left, #a00, #5a0000);
	--ladybug-rightShell-color: linear-gradient(to right, #a00, #5a0000);
	--ladybug-shellMark-color: radial-gradient(#000 50%, #fa0000);
	--leaf-background-color: #06a94d;
	--leaf-background-shade: radial-gradient(#06a94d 50%, #008142);
	--leaf-stem-color: #008142;
	--ladybug-wing-color: #5a0000;
}
/*ladybug*/
.ladybug-wrapper {
	height: 20rem;
	width: 47rem;
}
/*ladybug head*/
.ladybug__head {
	position: relative;
	top: 5.5rem;
	left: 10rem;
	background-image: var(--ladybug-body-color);
	height: 3rem;
	width: 5rem;
	border-radius: 100% 100% 90% 90%;
	border: 1px solid #000;
	display: flex;
	justify-content: space-between;
	z-index: 4;
}
.ladybug__head-marks {
	position: relative;
	top: 0.6rem;
	border-radius: 80% 30% 45% 15%;
	background-image: var(--ladybug-headMarks-color);
	height: 1.2rem;
	width: 1rem;
}
.mirror {
	transform: scaleX(-1);
}
.neck {
	transform: scale(0.5);
	position: relative;
	top: 1rem;
	z-index: 4;
}
.ladybug__antennas {
	position: relative;
	top: -2.5rem;
	left: 11.5rem;
	height: 2rem;
	width: 2rem;
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
.ladybug__antenna {
	width: 1rem;
	height: 100%;
	border-radius: 100%;
}
.ladybug__antenna-left {
	border-left: 3px solid #000;
	transform: rotate(-60deg);
}
.ladybug__antenna-right {
	border-right: 3px solid #000;
	transform: rotate(60deg);
}

/* ladybug shell*/
.ladybug__shellWrapper {
	position: relative;
	top: -1.7rem;
	left: 7.75rem;
	height: 10rem;
	width: 9.5rem;
	display: flex;
	align-items: center;
	z-index: 3;
}
.ladybug__shellAnimationWrapper {
	width: 50%;
	height: 10rem;
}
.ladybug__shell {
	height: 50%;
	width: 100%;
	border: 2px solid #6f0000;
}
.ladybug__shell-top-left {
	background-image: var(--ladybug-leftShell-color);
	border-radius: 100% 0% 0% 0%;
	border-bottom: 0;
}
.ladybug__shell-top-right {
	background-image: var(--ladybug-rightShell-color);
	border-radius: 0% 100% 0% 0%;
	border-bottom: 0;
}
.ladybug__shell-bottom-left {
	background-image: var(--ladybug-leftShell-color);
	border-radius: 0% 0% 10% 100%;
	border-top: 0;
	margin-top: -1px;
}
.ladybug__shell-bottom-right {
	background-image: var(--ladybug-rightShell-color);
	border-radius: 0% 0% 100% 10%;
	border-top: 0;
	margin-top: -1px;
}
.ladybug__shell-mark {
	border-radius: 100%;
	background-image: var(--ladybug-shellMark-color);
	height: 1rem;
	width: 1rem;
}
.ladybug__shell-mark-large {
	height: 1.8rem;
	width: 1.5rem;
}
.ladybug__shell-mark-top-left {
	position: relative;
	top: 3rem;
	left: 0.5rem;
	transform: skewX(-5deg);
}
.ladybug__shell-mark-top-right {
	position: relative;
	top: 3rem;
	left: 3.2rem;
	transform: skewX(5deg);
}
.ladybug__shell-mark-bottom-left {
	position: relative;
	top: 1.2rem;
	left: 1.7rem;
	transform: skewX(10deg);
}
.ladybug__shell-mark-bottom-right {
	position: relative;
	top: 1.2rem;
	left: 2rem;
	transform: skewX(-10deg);
}
.ladybug__shell-mark-middle-left {
	position: relative;
	left: 2.5rem;
}
.ladybug__shell-mark-middle-right {
	position: relative;
	left: 0.6rem;
}

/*ladybug body*/
.ladybug__body {
	position: relative;
	top: -12rem;
	left: 9.5rem;
	width: 6rem;
	height: 10rem;
	background-image: var(--ladybug-body-color);
	border-radius: 100%;
	z-index: 1;
}

/*ladybug wings*/
.ladybug__wingsWrapper {
	position: relative;
	top: -20rem;
	left: -11rem;
	width: 47rem;
	height: 6rem;
	display: flex;
	justify-content: space-between;
	aling-content: center;
	z-index: 2;
}
.ladybug__wing {
	width: 22rem;
	background-color: var(--ladybug-wing-color);
	opacity: 0.3;
}
.ladybug__wing-left {
	border-radius: 100% 2% 100px 8%;
	transform: rotate(-30deg);
	transform-origin: top right;
}
.ladybug__wing-right {
	border-radius: 2% 100% 8% 100px;
	transform: rotate(30deg);
	transform-origin: top left;
}

/*ladybugs positions*/
.ladybug1 {
	position: absolute;
	top: 22rem;
	left: 0%;
	transform: rotate(135deg);
	z-index: 20;
}
.ladybug2 {
	position: absolute;
	top: 37rem;
	left: -4rem;
	transform: rotate(30deg) scale(0.2);
	filter: blur(10px);
	z-index: 7;
}
.ladybug2 [data-animation] {
	animation-delay: 1s;
}
.ladybug3 {
	position: absolute;
	top: -1rem;
	left: 10rem;
	transform: rotate(-130deg) scale(0.5);
	filter: blur(4px);
	z-index: 9;
}

/*leaf*/
.leaf {
	position: absolute;
	transform: rotate(10deg) skewX(5deg);
	top: 2%;
	left: -5%;
	width: 45rem;
	height: 30rem;
	background-color: var(--leaf-background-color);
	background-image: var(--leaf-background-shade);
	border-radius: 0% 500px 0% 500px;
	border: 3px solid #059142;
	z-index: 10;
}
/*leaf stem*/
.leaf__stem {
	position: relative;
	top: 30%;
	left: -24.5%;
	width: 60rem;
	height: 15rem;
	border-top: 0.5rem solid var(--leaf-stem-color);
	border-radius: 100% 100% 0% 0%;
	transform: rotate(30deg);
	filter: blur(1px);
}
.leaf__stem-small {
	width: 8rem;
	height: 9rem;
	filter: blur(1px);
}
.leaf__stem-small-left {
	border-right: 0.5rem solid var(--leaf-stem-color);
	border-radius: 0% 0% 100% 0%;
	transform: rotate(-35deg);
}
.leaf__stem-small-right {
	width: 3rem;
	height: 5rem;
	border-left: 0.5rem solid var(--leaf-stem-color);
	border-radius: 0% 0% 0% 100%;
	transform: rotate(-70deg);
}

/*leaf stem positions*/
.leaf__stem-small-pos-1 {
	position: relative;
	top: -34.5%;
	left: 10%;
}
.leaf__stem-small-pos-2 {
	position: relative;
	top: -50.5%;
	left: 30%;
}
.leaf__stem-small-pos-3 {
	position: relative;
	top: -63%;
	left: 50%;
}
.leaf__stem-small-pos-4 {
	position: relative;
	top: -142%;
	left: 23%;
	transform: rotate(-95deg);
}
.leaf__stem-small-pos-5 {
	position: relative;
	top: -141.5%;
	left: 45%;
}
.leaf__stem-small-pos-6 {
	position: relative;
	top: -140%;
	left: 65%;
}

/*leaf positions*/
.leaf--pos-2 {
	transform: rotate(-15deg);
	transform-origin: top left;
	filter: blur(1px);
	z-index: 9;
}
.leaf--pos-3 {
	top: -6%;
	transform: rotate(40deg);
	transform-origin: top left;
	filter: blur(1px);
	z-index: 9;
}
.leaf--pos-4 {
	transform: rotate(20deg);
	transform-origin: top left;
	filter: blur(2px);
	z-index: 8;
}
.leaf--pos-5 {
	transform: rotate(-6deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 7;
}
.leaf--pos-6 {
	transform: rotate(12deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 7;
}
.leaf--pos-7 {
	transform: rotate(48deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 7;
}
.leaf--pos-8 {
	transform: rotate(-30deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 7;
}
.leaf--pos-9 {
	transform: rotate(32deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 7;
}
.leaf--pos-10 {
	transform: rotate(-22deg);
	transform-origin: top left;
	filter: blur(3px);
	z-index: 6;
}

/*animations*/

[data-animation="openLeftShell"] {
	animation: openLeftShell 1s infinite alternate ease-out;
	transform-origin: top;
}
[data-animation="openRightShell"] {
	animation: openRightShell 1s infinite alternate ease-out;
	transform-origin: top;
}
[data-animation="openLeftWing"] {
	animation: openLeftWing 1s infinite alternate;
}
[data-animation="openRightWing"] {
	animation: openRightWing 1s infinite alternate;
}

[data-animation="ladybugWalk"] {
	animation: walk 30s infinite;
}

@keyframes openLeftShell {
	0% {
		transform: rotate(50deg);
	}
	20% {
		transform: rotate(50deg);
	}
	40% {
		transform: rotate(0deg);
	}
}
@keyframes openRightShell {
	0% {
		transform: rotate(-50deg);
	}
	20% {
		transform: rotate(-50deg);
	}
	40% {
		transform: rotate(0deg);
	}
}

@keyframes openLeftWing {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(-20deg);
	}
	4% {
		transform: rotate(-15deg);
	}
	6% {
		transform: rotate(-20deg);
	}
	8% {
		transform: rotate(-15deg);
	}
	10% {
		transform: rotate(-20deg);
	}
	12% {
		transform: rotate(-15deg);
	}
	14% {
		transform: rotate(-20deg);
	}
	16% {
		transform: rotate(-15deg);
	}
	20% {
		transform: rotate(-20deg);
	}
	40% {
		transform: rotate(-90deg) scale(0.1);
	}
	100% {
		transform: rotate(-90deg) scale(0.1);
	}
}

@keyframes openRightWing {
	0% {
		transform: rotate(15deg);
	}
	2% {
		transform: rotate(20deg);
	}
	4% {
		transform: rotate(15deg);
	}
	6% {
		transform: rotate(20deg);
	}
	8% {
		transform: rotate(15deg);
	}
	10% {
		transform: rotate(20deg);
	}
	12% {
		transform: rotate(15deg);
	}
	14% {
		transform: rotate(20deg);
	}
	16% {
		transform: rotate(15deg);
	}
	20% {
		transform: rotate(20deg);
	}
	40% {
		transform: rotate(90deg) scale(0.1);
	}
	100% {
		transform: rotate(90deg) scale(0.1);
	}
}

@keyframes walk {
	0% {
		transform: rotate(0deg) scale(0.5);
	}
	100% {
		transform: rotate(360deg) scale(0.5);
	}
}