/*ball movement*/

@-webkit-keyframes ballMovement {
	0%{top:32px; right:40px;background-color: black;transform: scale(0.2);}
	4%{background-color: #224687;}
   5% {top:32px; right:40px;background-color: #03A9F4;transform: scale(1);}
   10% {top:62px; right:40px;}
   35%{top:106px; right:165px;}
   40%{top:185px; right:170px;}
   55%{top:211px; right:95px;}
   60%{top:275px; right:80px;}
   85%{top:310px; right:170px;}
      90%{top:368px;right:190px;}
      96% {top:368px; right:226px;background-color: #03A9F4;transform: scale(1);}
    100% {top:368px; right:226px;background-color: black;transform: scale(0.6);}
}

@keyframes ballMovement {
 0%{top:32px; right:40px;background-color: black;transform: scale(0.2);}
 4%{background-color: #224687;}
   5% {top:32px; right:40px;background-color: #03A9F4;transform: scale(1);}
   10% {top:62px; right:40px;}
   35%{top:106px; right:165px;}
   40%{top:185px; right:170px;}
   55%{top:211px; right:95px;}
   60%{top:275px; right:80px;}
   85%{top:310px; right:170px;}
   90%{top:368px;right:190px;}
   96% {top:368px; right:226px;background-color: #03A9F4;transform: scale(1);}
    100% {top:368px; right:226px;background-color: black;transform: scale(0.6);}
}



body {
	background-color: #B4E0E1;
}

.wrapper {
	width:300px;
	height:400px;
	position: relative;
	margin: 0 auto;
	margin-top: 3%;
	border-radius: 10px;
	background-color: #E61875;
	box-shadow: inset 0 0 3px 2px #AC1957, 0 0 0 6px white, 0 0 6px 9px rgba(0,0,0,0.5)
}

.hole1 {
	width:50px;
	height:50px;
	border-radius: 50%;
	background-color: black;
	position: absolute;
	overflow: hidden;
	right:30px;
	top:20px;
}

.b1 {
	width:150px;
	height:20px;
	background-color: #F9B24F;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #F9B24F, 8px 8px 0 #AC1957;
	transform:rotate(-20deg);
	position: absolute;
	top:110px;
	right:20px;
}

.b1::before {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	left:20px;
	top:5px;
}

.b1::after {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	right:20px;
	top:5px;
}

.b2 {
	width:150px;
	height:20px;
	background-color: #F9B24F;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #F9B24F, 8px 8px 0 #AC1957;
	transform:rotate(20deg);
	position: absolute;
	top:210px;
	left:20px;
}

.b2::before {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	left:20px;
	top:5px;
}

.b2::after {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	right:20px;
	top:5px;
}

.b3 {
	width:150px;
	height:20px;
	background-color: #F9B24F;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #F9B24F, 8px 8px 0 #AC1957;
	transform:rotate(-20deg);
	position: absolute;
	top:310px;
	right:20px;
}

.b3::before {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	left:20px;
	top:5px;
}

.b3::after {
	content: "";
	position: absolute;
	z-index: 2;
	width:10px;
	height:10px;
	background-color: white;
	border-radius: 50%;
	right:20px;
	top:5px;
}

.hole2 {
	width:50px;
	height:50px;
	border-radius: 50%;
	background-color: black;
	position: absolute;
	overflow: hidden;
	left:40px;
	bottom:0px;
}

.ball {
	width:30px;
	height:30px;
	background-color: #03A9F4;
	position: absolute;
	border-radius: 50%;
	right:50px;
	top:40px;
	-webkit-animation: ballMovement 3.5s linear infinite;
	animation: ballMovement 3.5s linear infinite;
}

.ball::before {
	content: "";
	position: absolute;
	width:10px;
	height:14px;
	background-color: #B4E0E1;
	position: absolute;
	border-radius: 50%;
	right:14px;
	top:1px;
	transform:rotate(40deg);
}