body {
	background-color: black;
}
.moon{
    position: relative;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 570px;
    width: 500px;
    height: 500px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 140px 5px 0px 0px #F8C936;
    rotate: 123deg;
    min-width: 500px;
    min-height: 500px;
    max-width: 500px;
    max-height: 500px;
  }
 .sparkle {
	position: relative;
	top: -254px;
    right: 0;
    bottom: 0;
    left: 665px;
  	height: 150px;
  	width: 150px;
  	background: #F8C936;
  	mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;
  	animation-name: sparkling;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
}
.sparkle2 {
	position: relative;
	top: -303px;
    right: 0;
    bottom: 0;
    left: 770px;
  	height: 70px;
  	width: 70px;
  	background: #F8C936;
  	mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;
  	animation-name: sparkling2;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
 }
 @keyframes sparkling {
  0%   {background-color:#F8C936; left:665px; top:-254px;}
  25%  {background-color:black; left:665px; top:-254px;}
  50%  {background-color:#F8C936; left:665px; top:-254px;}
  75%  {background-color:black; left:665px; top:-254px;}
  100% {background-color:#F8C936; left:665px; top:-254px;}
}
 @keyframes sparkling2 {
  0%   {background-color:#F8C936; left:770px; top:-303px;}
  14.29%%  {background-color:black; left:770px; top:-303px;}
  28.57%  {background-color:#F8C936; left:770px; top:-303px;}
  42.86%  {background-color:black; left:770px; top:-303px;}
  57.14% {background-color:#F8C936; left:770px; top:-303px;}
  71.43%  {background-color:black; left:770px; top:-303px;}
  85.71% {background-color:#F8C936; left:770px; top:-303px;}
  100%  {background-color:black; left:770px; top:-303px;}
}
.mouth{
    position: absolute;
    top: 332px;
    right: 0;
    bottom: 0;
    left: 569px;
    width: 199px;
    height: 207px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 73px -6px 0px 0px black;
    rotate: 39deg;
    min-width: 199px;
    min-height: 207px;
    max-width: 199px;
    max-height: 207px;
    animation-name: laughing;
    animation-duration: 2s;
  	animation-iteration-count: infinite;
  	animation-direction: alternate;
  }
 @keyframes laughing {
  0%   {rotate: 50deg; left:569px; top:332px;}
  20%  { rotate: 39deg; left:569px; top:332px;}
  40%  { rotate: 50deg; left:569px; top:332px;}
  60%  { rotate: 39deg; left:569px; top:332px;}
  80% { rotate: 50deg; left:569px; top:332px;}
  100%  { rotate: 39deg; left:569px; top:332px;}
}
.eye{
    position: absolute;
    top: 472px;
    right: 0;
    bottom: 0;
    left: 580px;
    width: 73px;
    height: 95px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 23px 0px 0px 0px black;
    rotate: 255deg;
  }
.nose{
    position: absolute;
    top: 407px;
    right: 0;
    bottom: 0;
    left: 642px;
    width: 73px;
    height: 95px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 25px 0px 0px #F8C936;
    rotate: 32deg;
  }  
.blood{
	position: absolute;
    top: 658px;
    right: 0;
    bottom: 0;
    left: 652px;
    width: 25px;
    height: 25px;
    background-color: #a10e0e;
	border-radius: 100px;
	animation-name: dripping;
	animation-duration: 3s;
  	animation-iteration-count: infinite;
  	/*animation-direction: alternate;*/
}
.blood1{
	position: absolute;
    top: 544px;
    right: 0;
    bottom: 0;
    left: 652px;
    width: 25px;
    height: 90px;
    background-color: #a10e0e;
    border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	animation-name: dripping1;
	animation-duration: 3s;
  	animation-iteration-count: infinite;
}
.blood2{
	position: absolute;
    top: 554px;
    right: 0;
    bottom: 0;
    left: 689px;
    width: 15px;
    height: 103px;
    background-color: #a10e0e;
    border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	animation-name: dripping2;
	animation-duration: 3s;
  	animation-iteration-count: infinite;
}
 @keyframes dripping {
  0%   { left:652px; top:537px;width: 5px; height: 5px;}
  50%   { left:652px; top:537px}
  100%  { left:652px; top:680px}
}
 @keyframes dripping1 {
  0%   { left:652px; top:544px;  height: 11px;}
  100%  { left:652px; top:544px; height: 115px;}
}
 @keyframes dripping2 {
  0%   { left:689px; top:544px;  height: 25px;}
  50%   { left:689px; top:544px;  height: 25px;}
  100%  { left:689px; top:544px; height: 103px;}
}