/*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;

}