<div class="logo">
	
	<div class="head">
		<div></div>
		<div></div>
		<div>
			<div></div>
			<div></div>
		</div>
	</div>
	
	<div class="body">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	
</div>

<div class="footsteps">
	<div></div>
	<div></div>
</div>

<div class="shadow">
	<div></div>
	<div></div>
</div>

$time: .9s

body
	height: 100vh
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	
.head
	position: relative
	height: 80px
	width: 160px
	background: #a4c639
	border-top-left-radius: 100px
	border-top-right-radius: 100px
	div:first-child, div:nth-child(2)
		position: absolute
		height: 7px
		width: 30px
		border-radius: 20px
		background: #a4c639
	div:first-child
		left: 15px
		transform: rotate(50deg)
	div:nth-child(2)
		transform: rotate(-50deg)
		left: 116px
	div:nth-child(3)
		position: relative
		div
			position: absolute
			height: 15px
			width: 15px
			background: #FFF
			border-radius: 50%
			top: 35px
			&:first-child
				left: 40px
			&:nth-child(2)
				left: 107px

.body
	position: relative
	width: 160px
	height: 130px
	background: #a4c639
	margin-top: 5px
	border-bottom-left-radius: 20px
	border-bottom-right-radius: 20px
	div
		position: absolute
		width: 35px
		height: 110px
		border-radius: 30px
		background: #a4c639
	div:first-child
		left: -40px
		transform-origin: top
		animation: arm-l $time infinite
		animation-delay: $time/2
	div:nth-child(2)
		left: 165px
		transform-origin: top
		animation: arm-r $time infinite
	div:nth-child(3), div:nth-child(4)
		top: 75px
	div:nth-child(3)
		animation: legup-l $time infinite
		animation-delay: $time/2
		left: 32px
	div:nth-child(4)
		animation: legup-r $time infinite
		left: 96px

.shadow
	margin-top: -72px
	z-index: -2
	height: 30px
	width: 160px
	background: #eee
	border-radius: 50%
	animation: shadow $time/2 infinite
	display: flex
	justify-content: space-between
	div
		height: 15px
		width: 40px
		background: #eee
		border-radius: 50%
		&:first-child
			margin: 8px -25px
		&:last-child
			margin: 8px -25px

.footsteps
	display: flex
	div
		height: 15px
		width: 30px
		background: darken(#eee, 7%)
		border-radius: 50%
		margin: 51px 20px
		z-index: -1
		&:first-child
			animation: footsteps-l $time infinite
			animation-delay: $time/2
		&:last-child
			animation: footsteps-r $time infinite
	
//------------------------------------------
// 	Animations
//------------------------------------------

.logo
	animation: bobble $time/2 infinite

@keyframes shadow
	50%
		transform: scale(.96)

@keyframes footsteps-l
	0%
		opacity: 0
	50%
		opacity: 1
	100%
		opacity: 0
		transform: translate(6px,-5px)

@keyframes footsteps-r
	0%
		opacity: 0
	50%
		opacity: 1
	100%
		opacity: 0
		transform: translate(-6px,-5px)
		

@keyframes bobble
	0%
		transform: translateY(-2px)
	70%
		transform: translateY(2px)
	100%
		transform: translateY(-2px)

@keyframes legup-l
	0%
		transform: translate(4px, -5px)
	30%
		transform: translate(-4px, 7px)
	100%
		transform: translate(4px, -5px)

@keyframes legup-r
	0%
		transform: translate(-4px, -5px)
	30%
		transform: translate(4px, 7px)
	100%
		transform: translate(-4px, -5px)

@keyframes arm-l
	0%
		transform: rotate(7deg)
	60%
		transform: rotate(-5deg)
	100%
		transform: rotate(7deg)

@keyframes arm-r
	0%
		transform: rotate(-7deg)
	60%
		transform: rotate(5deg)
	100%
		transform: rotate(-7deg)