* {
	outline: none;
	user-select:none;
}

body {
	margin: 0 auto;
}

#play_ground {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow:hidden;
}

#ball {
	font-size:20px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ff1616;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -100%);
	transition: top 0.1s;
	animation: stretch-ball 0.1s infinite alternate;
	box-shadow: inset 20px 0px 25px 2px #860000, inset 20px 0px 25px 2px #ff0000;
	cursor: pointer;
}

div#ball > span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: Arial;
	color: #fff;
	font-weight: 700;
}


@keyframes stretch-ball {
	from {
		width: 100px;
		box-shadow: inset 20px 0px 25px 2px #860000, inset 20px 0px 25px 2px #ff0000;
	}
	to {
		width: 120px;
		box-shadow: inset 20px 0px 25px 3px #860000, inset 20px 0px 25px 3px #ff0000;
	}
}

@keyframes narrow-ball {
	20% {
		width: 200px;
		height: 200px;
		font-size:50px;
	}
	40% {
		width: 0px;
		height: 0px;
		font-size:0px;
	}
	100% {
		width: 0px;
		height: 0px;
		font-size: 0px;
	}
}

@keyframes falldown {
	100% {
		top:100%;
	}
}

#demo {
	position: absolute;
}