/*moon movement*/

@-webkit-keyframes moonMovement {
   0%  {bottom:24%;left:14%;z-index: 1;}
    3% {bottom:27%;left:17%;}
    25% {-webkit-transform: scale(0.2);}
    47% {bottom:59%;left:69%;}
    49% {z-index: 1;-webkit-transform: scale(1);}
    50% {bottom:62%;left:72%;z-index: 10;box-shadow: -25px 25px 0 2px rgba(0,0,0,0.5)}
    57% {bottom:59%;left:69%;}
    75% {-webkit-transform: scale(2.2);box-shadow: 0px 0px 0 4px rgba(0,0,0,0.8)}
    97% {bottom:27%;left:17%;box-shadow: 15px -15px 0 2px rgba(0,0,0,0)}
    99% {z-index: 10;}
    100% {bottom:24%;left:14%;z-index: 1;-webkit-transform: scale(1);box-shadow: 15px -15px 0 2px rgba(0,0,0,0)}
}

@keyframes moonMovement {
   0%  {bottom:24%;left:14%;z-index: 1;}
    3% {bottom:27%;left:17%;}
    25% {-webkit-transform: scale(0.2);}
    47% {bottom:59%;left:69%;}
    49% {z-index: 1;-webkit-transform: scale(1);}
    50% {bottom:62%;left:72%;z-index: 10;box-shadow: -25px 25px 0 2px rgba(0,0,0,0.5)}
    57% {bottom:59%;left:69%;}
    75% {-webkit-transform: scale(2.2);box-shadow: 0px 0px 0 4px rgba(0,0,0,0.8)}
    97% {bottom:27%;left:17%;box-shadow: 15px -15px 0 2px rgba(0,0,0,0)}
    99% {z-index: 10;}
    100% {bottom:24%;left:14%;z-index: 1;-webkit-transform: scale(1);box-shadow: 15px -15px 0 2px rgba(0,0,0,0)}
}



body {
    background-color: #000;
}

.wrapper {
	width:250px;
	height:250px;
	/*border: 1px solid red;*/
	margin: 0 auto;
	margin-top: 10%;
	position: relative;
}

.planet {
	width:100px;
	height:100px;
	border-radius: 50%;
	background-color: #2574A9;
	position: absolute;
	left:50%;
	top:50%;
	box-shadow: -20px 20px 0 0px rgba(0,0,0,0.7);
	transform:translate(-50%,-50%);
	z-index: 5;
	overflow: hidden;
}

.planet::before {
	content:"";
	height:100px;
	width:100px;
	border-radius: 50%;
	position: absolute;
	left:10%;
	bottom:10%;
	background-color: #1A8BC3;
}

.planet::after {
	content:"";
	height:100px;
	width:100px;
	border-radius: 50%;
	position: absolute;
	left:15%;
	bottom:15%;
	background-color: #3498DB;

}

.moon {
	width:30px;
	height:30px;
	border-radius: 50%;
	background-color: #95A5A6;
	position: absolute;
	left:40%;
	bottom:30%;
	overflow: hidden;
	-webkit-animation: moonMovement 1.9s linear infinite;
	animation: moonMovement 1.9s linear infinite;
}

.moon::before {
	content:"";
	height:30px;
	width:30px;
	border-radius: 50%;
	position: absolute;
	left:10%;
	bottom:10%;
	background-color: #D2D7D3;
}