body{
	background-color: black;
}

.parentsbox:before{
	position:absolute;
	content:"";
	animation-name: title;
	animation-duration: 4s;
	animation-delay: 0s;
	animation-iteration-count: infinite;

}
.parentsbox{
	position:relative;
	height: 100px;
	width:100px;
	border-radius:25px;
	z-index:-1;
	background-color: #edfcfc;
	box-shadow: 3px 3px 5px inset;
	animation-name: sky;
	animation-duration: 4s;
	animation-iteration-count: infinite;

}
.parentsbox:active {
  background-color: blue;
}
.pighead{
	position:absolute;
	top:20px;
	left:30px;
	background-color: #2cff29;
	border-radius:100px;
	height:40px;
	width:40px;
	z-index:0;
	animation-name: headmove;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	box-shadow: 3px 3px 5px #197339 inset;
}
/*.pighead:before{
	position:absolute;
	top:20px;
	left:30px;
	background-color: gold;
	height: 20px;
	width: 30px;	
	border-radius: 10px;
	z-index:1;	
}*/

.pigear:nth-of-type(2){
	position:absolute;
	width:10px;
	height:0;
	border-radius: 10px;
	border-bottom: 2px solid #2cff29;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;

	animation-name: earmove1;
	animation-duration: 4s;
	animation-iteration-count: infinite;

	top:22px;
	left:28px;
	transform:rotate(-30deg);
	z-index: 1;
}

.pigear:nth-of-type(2):after{
	position:absolute;
	content:"";
	top:1.8px;
	left:-2.4px;
	width:0px;
	height:0px;
	border-top: 9.8px solid #2cff29;
	border-left: 7.7px solid transparent;
	border-right: 7.7px solid transparent;
	border-bottom:10px solid transparent;
	z-index:1;
}

.pigear:nth-of-type(3){
	position:absolute;
	width:10px;
	height:0;
	border-radius: 10px;
	border-bottom: 2px solid #2cff29;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	animation-name: earmove2;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	top:22px;
	left:58px;
	transform:rotate(30deg);
	z-index: 1;
	box-shadow: 3px 3px 5px #197339 inset;
}

.pigear:nth-of-type(3):after{
	position:absolute;
	content:"";
	top:1.8px;
	left:-2.4px;
	width:0px;
	height:0px;
	border-top: 9.8px solid #2cff29;
	border-left: 7.7px solid transparent;
	border-right: 7.7px solid transparent;
	border-bottom:10px solid transparent;
	z-index:1;
	box-shadow: 3px 3px 5px #197339 inset;
}

.pigeye:nth-of-type(4){
	position:absolute;
	width:0;
	height:0;
	background-color:white;
	box-shadow: 0px 0px 2px black inset;
	top:35px;
	left:38px;
	width:6px;
	height:6px;
	border-radius:8px;
	z-index: 1;
	animation-name:eyemove;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.pigeye:nth-of-type(5){
	position:absolute;
	width:0;
	height:0;
	background-color:white;
	box-shadow: 0px 0px 2px black inset;
	top:35px;
	left:53px;
	width:6px;
	height:6px;
	border-radius:8px;
	z-index: 1;
	animation-name:eyemove;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.eye1 p{
	position: absolute;
	font-weight: 999;
	font-size:20px;
	top:-34.6px;
	left:1px;
	z-index:2;
	animation-name:eyemove2;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.eye2 p{
	position: absolute;
	font-size:20px;
	font-weight: 999;
	top:-34.6px;
	left:1px;
	z-index:3;
	animation-name:eyemove2;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.pignose{
  position: absolute;
  width: 16px;
  height: 8px;
  top:42px;
  left:41px;
  border-radius: 8px / 5px;
  background-color:#2cff29;
  z-index:2;
  box-shadow: 3px 3px 3px green inset;
  animation-name: nosemove;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.pignose p{
	position: absolute;
	letter-spacing: 3px;
	top:-29.2px;
	left:1.5px;
	color:#33634a;
	font-weight: bold;
	font-size:18px;
}
.pigsmile{
	position: absolute;
	top:50px;
	left:43px;
  width: 10px;
  height: 6px;
  border-radius: 0 0 10px 10px;
  background-color: #33634a;
  z-index: 2;
  box-shadow: 2px 2px 2px #304d31 inset;
  animation-name: mouthmove;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.pigsmile:before{
  position: absolute;
  content: "";
  width: 10px;
  height: 3.5px;
  border-radius: 0 0 10px 10px;
  background-color: #2cff29;
  z-index: 3;
}

@keyframes headmove{
	0%{top:20px;}
	50%{top:10px;}
	60%{transform: rotateX(30deg)}
	100%{top:50px;transform: rotateX(0deg)}
}
@keyframes eyemove{
	0%{top:35px;}
	35%{transform: 	rotateX(0deg);}
	40%{transform: 	rotateX(90deg);}
	45%{transform: 	rotateX(0deg);}
	50%{top:25px;}
	75%{transform: 	rotateX(0deg);}
	80%{transform: 	rotateX(90deg);}
	85%{transform: 	rotateX(0deg);}
	100%{top:65px;}
}
@keyframes eyemove2{
	0%{left:1px;}
	80%,100%{left:0.5px;}

}

@keyframes earmove1{
	0%{top:22px;left:28px;transform: rotate(-30deg);}
	50%{top:12px;left:32px;transform: rotate(0deg);}
	100%{top:52px;left:28px;transform: rotate(-30deg)}
	
}
@keyframes earmove2{
	0%{top:22px;left:58px;transform: rotate(30deg)}
	50%{top:12px;left:54px;transform: rotate(0deg)}
	100%{top:52px;left:58px;transform: rotate(30deg)}
	
}

@keyframes nosemove{
	0%{top:42px;}
	50%{top:32px;}
	60%{
		transform: rotateX(30deg);
	}
	100%{top:72px;transform: rotateX(0deg);}		
}
@keyframes mouthmove{
	0%{top:50px;}
	50%{
		top:40px;
	}
	60%{
		transform: rotateX(30deg);
	}	
	100%{
		top:80px;
		transform: rotateX(0deg);
	}
}
@keyframes sky{
	0%{background-color: #edfcfc;box-shadow: 3px 3px 5px #c7eaf2 inset;border-radius: 25px;margin-left: -150px}
	40%{border-radius:100px;}
	80%{background-color: #11135c;box-shadow: 3px 3px 5px #4d5eff inset;border-radius: 25px;transform: rotate(1080deg)}
	100%{background-color: #11135c;box-shadow: 3px 3px 5px #4d5eff inset;transform: rotate(1080deg);margin-left:100px;}	
}
@keyframes title{
	0%{content:"";}
	80%{content:"";	}
	100%{top:25px;
	left:8px;
	font-size:8px;
	font-weight: bold;
	content:"Spinning Bad Piggies Filbert Patricio";
	font-family: sans-serif;
	text-align: center;
	color: #2cff29;}
}