h1 {
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

.robots {}

.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
	background-color: blue;
}

.head {
	width: 200px;
	margin: 0 auto;
	height: 150px;
	border-radius: 200px 200px 0 0;
	margin-bottom: 10px;
	display: flex;
	animation-name: head-dance;
	animation-duration: 500ms;
	animation-iteration-count: 100;

}


.head:hover {
	width: 300px;
	transition: 1s ease-in-out;
}

.upper_body {
	width: 300px;
	height: 150px;
	display: flex;
	margin: 0 auto;
	animation-name: body-dance;
	animation-duration: 500ms;
	animation-iteration-count: 100;
}

.left_arm,
.right_arm {
	width: 40px;
	height: 125px;
	border-radius: 100px;
}

.left_arm {
	margin-right: 10px;
	animation-name: left-arm-dance;
	animation-duration: 1s;
	animation-iteration-count: 100;
}

.left_arm:hover {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
}

.right_arm {
	margin-left: 10px;
	animation-name: right-arm-dance;
	animation-duration: 1s;
	animation-iteration-count: 100;
}

.right_arm:hover {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

.torso {
	width: 200px;
	height: 200px;
	border-radius: 0 0 50px 50px;
}

.lower_body {
	width: 200px;
	height: 200px;
	/* This is another useful property. Hmm what do you think it does?*/
	margin: 0 auto;

}

.left_leg,
.right_leg {
	width: 40px;
	height: 120px;
	border-radius: 0 0 100px 100px;
}

.left_leg {
	margin-left: 45px;
	position: relative;
	top: 20px;
	right: 10px;
	animation-name: left-leg-dance;
	animation-duration: 1s;
	animation-iteration-count: 100;

}

.left_leg:hover {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
}

.right_leg {
	margin-left: 100px;
	position: relative;
	top: -100px;
	left: 15px;
	animation-name: right-leg-dance;
	animation-duration: 1s;
	animation-iteration-count: 100;
}

.right_leg:hover {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

.left_eye,
.right_eye {
	width: 20px;
	height: 20px;
	border-radius: 15px;
	background-color: white;
}

.left_eye {
	/* These properties are new and you haven't encountered
	in this course. Check out CSS Tricks to see what it does! */
	position: relative;
	top: 100px;
	left: 35px;
}

.right_eye {
	position: relative;
	top: 81px;
	left: 140px;
}

#player{
	display: flex;
	justify-content: center;
}

@keyframes right-leg-dance {
	50% {
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes left-leg-dance {
	50% {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes right-arm-dance {
	50% {
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes left-arm-dance {
	50% {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes body-dance {
	50% {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	100% {
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-200deg);
		-o-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
}
@keyframes head-dance {
	25% {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	75% {
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-200deg);
		-o-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
}