body {
  background-color: #f2f2f2;
}

.parentsbox {
  position: relative;
  margin: 100px auto;
  width: 240px;
  height: 240px;
  border-radius: 0%;
  background-color: #AC50B4;
  animation: rainbow 15s ease-in-out infinite;
}

@keyframes rainbow {
  0% {
    background-color: #AC50B4;
  }

  10% {
    background-color: #C68598;
  }

  20% {
    background-color: #882F2C;
  }

  30% {
    background-color: #CE773F;
  }

  40% {
    background-color: #B0A528;
  }

  50% {
    background-color: #47B13B;
  }

  60% {
    background-color: #6E8AC0;
  }

  70% {
    background-color: #262E75;
  }

  80% {
    background-color: #7839AE;
  }

  90% {
    background-color: #E1E1E1;
  }

  100% {
    background-color: #AC50B4;
  }
}

.pighead {
  position: absolute;
  top: 40px;
  width: 240px;
  height: 40px;
  background-color: #C4B0A1;
  background-image: linear-gradient(to right, #B2937B 0%, #B2937B 16.6%, #B6977F 16.6%, #B6977F 33.3%, #B2947C 33.3%, #B2947C 50%, #B6977F 50%, #B6977F 66.6%, #B79B86 66.6%, #B79B86 83.3%, #AD907A 83.3%, #AD907A 100%);
}

.pigear {
  position: absolute;
  width: 240px;
  height: 40px;
}

.ear1 {
  top: 80px;
  background-color: #C4B0A1;
  background-image: linear-gradient(to right, #B2937B 0%, #B2937B 16.6%, #B6977F 16.6%, #B6977F 33.3%, #B08F76 33.3%, #B08F76 50%, #AA8970 50%, #AA8970 66.6%, #B79B86 66.6%, #B79B86 83.3%, #AD907A 83.3%, #AD907A 100%);

}

.ear2 {
  top: 120px;
  background-color: #C4B0A1;
  background-image: linear-gradient(to right, #8E725E 0%, #8E725E 16.6%, #AA8970 16.6%, #AA8970 33.3%, #A8856A 33.3%, #A8856A 50%, #A58268 50%, #A58268 66.6%, #A58268 66.6%, #A58268 83.3%, #8A6E5A 83.3%, #8A6E5A 100%);

}

.pigeye {
  position: absolute;
  top: 80px;
  width: 80px;
  height: 40px;
  border-radius: 0%;
  background-color: #000;
}

.eye1 {
  left: 0px;
  background-image: linear-gradient(to left, white 50%, black 50%);
}

.eye2 {
  right: 0px;
  background-image: linear-gradient(to left, black 50%, white 50%);
  color: white;
}

.pignose {
  color: #947864;
  position: absolute;
  width: 160px;
  height: 80px;
  top: 160px;
  right: 40px;
  background: conic-gradient(#8E725E 0deg 90deg, #8E725E 90deg 180deg, #8E725E 180deg 270deg, #947864 270deg 360deg);
}

.pigsmile {
  color: pink;
  position: absolute;
  width: 80px;
  height: 80px;
  top: 160px;
  right: 80px;
  background: conic-gradient(#FFB5B5 0deg 90deg, #DA9D9D 90deg 180deg, #D39696 180deg 270deg, #FFB5B5 270deg 360deg);

}

.parentsbox:hover .pigeye {
  position: absolute;
  top: 30px;
  width: 100px;
  height: 100px;
}

.parentsbox:hover .eye1 {
  left: -20px;
  animation: eyee1 0.5s ease-in-out infinite;
}

.parentsbox:hover .eye2 {
  right: -20px;
  animation: eyee2 0.5s ease-in-out infinite;
}

.parentsbox:hover .pigsmile {
  color: pink;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 150px;
  right: 70px;
  background: conic-gradient(#FFB5B5 0deg 90deg, #DA9D9D 90deg 180deg, #D39696 180deg 270deg, #FFB5B5 270deg 360deg);

}

@keyframes eyee1 {
  0% {
    color: black;
    background: conic-gradient(white 0deg 90deg, white 90deg 180deg, white 180deg 270deg, black 270deg 360deg);
  }

  33.3% {
    color: white;
    background: conic-gradient(black 0deg 90deg, white 90deg 180deg, white 180deg 270deg, white 270deg 360deg);
  }

  66.6% {
    color: white;
    background: conic-gradient(white 0deg 90deg, black 90deg 180deg, white 180deg 270deg, white 270deg 360deg);

  }

  100% {
    color: white;
    background: conic-gradient(white 0deg 90deg, white 90deg 180deg, black 180deg 270deg, white 270deg 360deg);
  }
}

@keyframes eyee2 {
  0% {
    color: white;
    background: conic-gradient(white 0deg 90deg, black 90deg 180deg, white 180deg 270deg, white 270deg 360deg);
  }

  33.3% {
    color: white;
    background: conic-gradient(white 0deg 90deg, white 90deg 180deg, black 180deg 270deg, white 270deg 360deg);
  }

  66.6% {
    color: black;
    background: conic-gradient(white 0deg 90deg, white 90deg 180deg, white 180deg 270deg, black 270deg 360deg);

  }

  100% {
    color: white;
    background: conic-gradient(black 0deg 90deg, white 90deg 180deg, white 180deg 270deg, white 270deg 360deg);
  }
}