<h1>I move with the arrow keys</h1>
<div class="bee">
	<div class="head">
		<div class="antenna left"></div>
		<div class="antenna right"></div>
		<div class="eye left"></div>
		<div class="eye right"></div>
	</div>
	<div class="body">
		<div class="left">
			<div class="part1"></div>
			<div class="part2"></div>
		</div>
		<div class="right">
			<div class="part1"></div>
			<div class="part2"></div>
		</div>
	</div>
</div>

:root {
	--x: 0px;
	--y: 0px;
}

body {
	overflow: hidden;
	background: #e2062c;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

h1 {
	text-align: center;
	font-size: 1.5rem;
}

.bee {
	position: relative;
	width: 160px;
	height: 160px;
	transform: translate(var(--x), var(--y));
	transition: all 0.2s;
	animation: bob ease-in-out 2.5s infinite;

	/*head*/
	.head {
		display: block;
		z-index: 2;
		top: 10%;
		left: -15%;
		position: absolute;
		width: 60%;
		height: 60%;
		border-radius: 100%;
		background: #000;

		/*antenna*/
		.antenna {
			position: absolute;
			background: #000;
			width: 15%;
			height: 50%;
			border-radius: 10px;
			top: -32%;
			transform-origin: bottom left;
			&.left {
				left: 26%;
				animation: leftantenna 1.5s ease-in-out infinite;
			}
			&.right {
				right: 20%;
				transform: rotate(20deg);
				animation: rightantenna 1.5s ease-in-out infinite;
			}
		}

		/*eyes*/
		.eye {
			position: absolute;
			background: #fff;
			width: 40%;
			height: 45%;
			border-radius: 100%;
			&::after {
				content: "";
				position: absolute;
				left: 25%;
				top: 25%;
				width: 50%;
				height: 50%;
				background: #000;
				border-radius: 100%;
			}
			&.left {
				left: -15%;
				top: 20%;
				transform: scale(0.6, 1);
			}
			&.right {
				right: 0;
				top: 20%;
			}
		}
	}

	.body {
		position: relative;
		border-radius: 100%;
		width: 70%;
		height: 70%;
		background: #000;
		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background: #f2ea00;
			border-radius: 100%;
		}
		&::before {
			transform: scale(90%) translate(-15px, 5px);
			z-index: 1;
		}
		&::after {
			transform: translate(15px, -5px);
			z-index: -1;
		}

		/* Wings */
		.left,
		.right {
			position: absolute;
			width: 100%;
			z-index: 0;
			.part1,
			.part2 {
				width: 30px;
				height: 100px;
				background: linear-gradient(
					to bottom,
					rgba(255, 255, 255, 0.4),
					rgba(255, 255, 255, 0.8),
					#ccc
				);
				position: absolute;
				border-radius: 50%;
			}
		}

		.left {
			left: 10%;
			bottom: 70%;
			animation: leftwing linear 0.15s infinite;
			.part1,
			.part2 {
				top: 0;
				left: 0;
				transform-origin: top left;
			}
			.part1 {
				transform: rotate(140deg);
			}
			.part2 {
				transform: rotate(120deg);
				opacity: 0.8;
			}
		}

		.right {
			bottom: 70%;
			right: 20%;
			animation: rightwing linear 0.15s infinite;
			.part1,
			.part2 {
				top: 0;
				right: 0;
				transform-origin: top right;
			}
			.part1 {
				transform: rotate(260deg);
			}

			.part2 {
				transform: rotate(240deg);
				opacity: 0.8;
			}
		}
	}
}

@keyframes bob {
	0%,
	100% {
		top: 0;
	}
	40% {
		top: 40px;
	}
}

@keyframes rightwing {
	0%,
	100% {
		transform: rotate(20deg);
	}
	50% {
		transform: rotate(-40deg);
	}
}

@keyframes leftwing {
	0%,
	100% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(40deg);
	}
}

@keyframes leftantenna {
	0%,
	100% {
		transform: rotate(5deg);
	}
	60% {
		transform: rotate(20deg);
	}
}

@keyframes rightantenna {
	0%,
	100% {
		transform: rotate(20deg);
	}
	60% {
		transform: rotate(30deg);
	}
}

const bee = document.querySelector(".bee");
const root = document.querySelector(":root");
let activeKey;
let xAxis = 0;
let yAxis = 0;

document.addEventListener("keydown", move);

function move(e) {
	e.preventDefault();
	//if (activeKey == e.keyCode) return;
	activeKey = e.keyCode;

	//left
	if (e.keyCode == 37) {
		xAxis = xAxis - 15;
		console.log("start moving LEFT");
	}
	//top
	else if (e.keyCode == 38) {
		yAxis = yAxis - 15;
		console.log("start moving UP");
	}
	//right
	else if (e.keyCode == 39) {
		xAxis = xAxis + 15;
		console.log("start moving RIGHT");
	}
	//bottom
	else if (e.keyCode == 40) {
		yAxis = yAxis + 15;
		console.log("start moving DOWN");
	}

	console.log(xAxis + ", " + yAxis);
	root.style.setProperty("--x", xAxis + "px");
	root.style.setProperty("--y", yAxis + "px");
}