@charset "utf-8";
body {
	  background:black;
}

.container {
	  position:relative;
	  width:800px;
	  height:600px;
	  margin:90px auto;
	  padding-top:50px  ;
}

.luna {
	  position:absolute;
	  width:152px;
	  height:152px;
	border-radius: 100%;
	box-shadow: 0 0 90px #FFf;
	background: rgba(255,255,255,.7);
	  margin:152px 80px;
}

.bosque {
	  position:relative;
	  width:300px;
	  height:550px;
	  background: -webkit-linear-gradient(top,  rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%);
	  background: linear-gradient(to bottom,  rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%);
		  margin:0px auto;
	   box-shadow:5px 5px 3px rgba(0,0,0,.3);
	  overflow:hidden;
}

.cerro {
	  position:absolute;
	  width:350px;
	  height:350px;
	  border-radius:100%;
	  background: -webkit-linear-gradient(top,  rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%);
		background: linear-gradient(to bottom,  rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%);
		margin:350px -21px;
}

.ciervo {
	  position:absolute;
	  margin:221px 142px;
	  transform:scale(.3);
}

.head {
	  position:absolute;
	  width: 70px;
	  height: 90px;
	  border-radius: 50%  50%  50%  50%   / 60%   60%   40%  40%;
	  background:#100026;
	  margin:90px;
}

.cuello {
	  position:absolute;
	  border-bottom: 102px solid #100026;
	  border-left: 12px solid transparent;
	  border-right: 12px solid transparent;
	  height: 0;
	  width: 25px;
	  margin:152px 102px;
}

.orejas {
	  position:absolute;
	  width:21px;
	  height:21px;
	  border-radius:30px 300px 30px 300px;
	  background:#100026;
	  margin:25px -13px;
	  transform:rotate(-12deg);
}

.orejas::before {
	  content:"";
	  position:absolute;
	  width:21px;
	  height:21px;
	  border-radius:300px 30px 300px 30px;
	  background:#100026;
	  margin:17px 73px;
	  transform:rotate(24deg);
}

.body {
	  position:absolute;
	  width:192px;
	  height:90px;
	  border-radius: 0 0 321px 321px;
	  background:#100026;
	  margin:251px -41px;
}

.body::before {
	  content:"";
	  display:block;
	  width: 142px;
	  height: 221px;
	  border-bottom: 50px solid #100026;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-radius: 152px / 121px;
	  margin:-225px -21px;
}

.body::after {
	  content:"";
	  position:absolute;
	  width:63px;
	  height:63px;
	  border-radius:100%;
	  background:#100026;
	  margin:155px -3px;
}

.legs { /*legs 羊腿*/
	  position:absolute;
	  border-top: 172px solid #100026;
	  border-left: 12px solid transparent;
	  border-right: 12px solid transparent;
	  height: 0;
	  width: 12px;
	  margin:300px 70px;
	  transform: rotate(9deg);
}

.legs3 {
	  position:absolute;
	  border-top: 185px solid #100026;
	  border-left: 12px solid transparent;
	  border-right: 12px solid transparent;
	  height: 0;
	  width: 12px;
	  margin:291px 112px;
	  transform: rotate(-12deg);
}

.legs7 {
	  position:absolute;
	  width:90px;
	  height:45px;
	  border-radius:0 0 132px 132px;
	  background:#100026;
	  margin:251px -70px;
	  transform:rotate(90deg)    ;
}

.legs7::before {
	  content:"";
	  position:absolute;
	  border-top: 192px solid #100026;
	  border-left: 12px solid transparent;
	  border-right: 12px solid transparent;
	  height: 0;
	  width: 12px;
	  margin:-45px 132px;
	  transform: rotate(-75deg);
}

.legs9 {
	  position:absolute;
	  border-top: 172px solid #100026;
	  border-left: 12px solid transparent;
	  border-right: 12px solid transparent;
	  height: 0;
	  width: 12px;
	  margin:300px -7px;
	  transform: rotate(-9deg);
}

.cola {
	  position:absolute;
	  width:70px;
	  height:95px;
	  border-radius:100%;
	  border-left:21px solid #100026;
	  margin:225px -69px;
	  transform:rotate(35deg);
}

.cuernos, .cuernos3 {
	  position:absolute;
	  width:172px;
	  height:172px;
	  border-radius:100%;
	  border-bottom:12px solid #100026;

		;
}

.cuernos {
	  position:absolute;
	   margin:-60px 40px;
}

.cuernos3 {
	  position:absolute;
	   margin:-55px 40px;
	  transform:scale(.7);
}

.c1 {
	  position:absolute;
	  width:50px;
	  height:50px;
	  border-radius:100%;
	  border-right:7px solid #100026;
	  margin:121px 90px;
	  transform:rotate(-21deg);
}

.c1::before {
	  content:"";
	  position:absolute;
	  width:50px;
	  height:50px;
	  border-radius:100%;
	  border-right:7px solid #100026;
	  margin:30px 50px;
	  transform:rotate(-70deg);
}

.c2 {
	  position:absolute;
	  width:50px;
	  height:50px;
	  border-radius:100%;
	  border-left:7px solid #100026;
	  margin:121px 30px;
	  transform:rotate(0deg);
}

.c2::before {
	  content:"";
	  position:absolute;
	  width:50px;
	  height:50px;
	  border-radius:100%; /*radius 半径*/
	  border-right:7px solid #100026;
	  margin:7px -73px;
	  transform:rotate(-93deg);
}

.s1, .s2, .s3, .s4, .s5 { /*五个星星*/
	  position:absolute; /*absolute 绝对定位*/
	  border-radius:100%;
	  background:white;
	  box-shadow:0px 0px 1px 2px rgb(150,124,201); /*阴影*/
}

.s1 {
	  width:5px;
	  height:5px;
	  margin:30px 30px;
	  animation:brilla 1.2s alternate infinite; /*animation 动画*/
}

.s2 {
	  width:5px;
	  height:5px;
	  margin:30px 261px;
	  animation:brilla .9s alternate infinite;
}

.s3 {
	  width:3px;
	  height:3px;
	  margin:12px 145px;
	  animation:brilla .8s alternate infinite;
}

.s4 {
	  width:3px;
	  height:3px;
	  margin:70px 90px;
	  animation:brilla .7s alternate infinite;
}

.s5 {
	  width:3px;
	  height:3px;
	  margin:70px 201px;
	  animation:brilla .6s alternate infinite;
}


@keyframes brilla {
	  0% {
		opacity: 0.3;
	}
	/*从0.0（完全透明）到1.0（完全不透明）*/
	  100% {
		opacity: 1;
	}
}