.parentsbox{
    width: 400px;
	height: 400px;
	background: yellow;
	border-radius: 30%;
}
.pighead{
	width: 200px;
	height: 200px;
	background: pink;
	position: relative;
	border-radius: 100%;
	top: 35px;
	left: 90px;
}
.parentsbox:hover .pighead {
	background-color: mediumseagreen;
}
.pigear{
	
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
	  border-radius: 30%;
      border-top: 40px solid magenta;
	  
}
.parentsbox:hover .pigear {
	border-top:40px solid green;
}
.ear1{
	position:absolute;
	top: 65px;
	left: 120px;
	transform: rotate(-20deg);
}
.ear2{
	position: absolute;
	top: 70px;
	left: 230px;
	transform: rotate(25deg);
}
.parentsbox:hover .ear1 {
	transform : rotate(-220deg);
	top : 40px;
	left : 95px;
}
.parentsbox:hover .ear2 {
	transform : rotate(220deg);
	top : 44px;
	left : 245px;
}
.pigeye{
	width: 30px;
	height: 30px;
	background: white;
	border-radius: 100%;
	position: absolute;
}
.eye1{
	position: absolute;
	top: 133px;
	left: 145px;
}
.eye2{
	position: absolute;
	top: 133px;
	left: 225px;
}

.eye1::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 9px;
	width: 15px;
	height: 15px;
	background: black;
	border-radius: 90%;

	animation-name: spin;
    animation-duration: 2s; /* Duration of the animation */
    animation-timing-function: linear; /* Linear timing function for smooth rotation */
    animation-iteration-count: infinite; /* Infinite animation loop */
  }
 .eye2::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 9px;
	width: 15px;
	height: 15px;
	background: black;
	border-radius: 90%;

	animation-name: spin;
    animation-duration: 2s; /* Duration of the animation */
    animation-timing-function: linear; /* Linear timing function for smooth rotation */
    animation-iteration-count: infinite; /* Infinite animation loop */
  }

  @keyframes spin {
    0% {
        transform: translateY(0); /* Starting position */
    }
    50% {
        transform: translateY(10px); /* Middle position - move pupil up */
    }
    100% {
        transform: translateY(0); /* Ending position - move pupil down */
    }
}


  .pignose {
	width: 68px;
	height: 40px;
	border-radius: 45%;
	background-color: white;
	position: absolute;
	top: 170px;
	left: 165px;

	
  }
  
  .pignose::before,
  .pignose::after {
	content: '';
	width: 15px;
	height: 15px;
	background: magenta;
	border-radius: 100%;
	position: absolute;
	top: 14px;
  }

  .parentsbox:hover .pignose::before {
	background : green;
}
.parentsbox:hover .pignose::after {
	background : green;
}
  
  .pignose::before {
	left: 13px;
  }
  
  .pignose::after {
	left: 43px;
  }

.pigsmile{
	width: 35px;
    height: 26px;
    border-radius: 100%;
    box-shadow:  0 8px 0 -1px black;
	position: absolute;
	top: 200px;
	left: 175px;
}
.parentsbox:hover .pigsmile {
	transform : rotate(180deg);
	top : 230px;
}