/* define styles for the owl's head and ears */
.parentsbox {
  position: relative;
  width: 220px;
  height: 300px;
  background-color: #987554;
  margin: 50px auto;
  border-radius: 80% / 80% 80% 50% 50%;
  animation-name: movement;
  animation-duration: 8s;
  animation-timing-function: ease-out;
}

@keyframes movement {
  0% {
    left: 0px;
  }
  50% {
    left: 200px;
    background-color: #ff9191;
  }
  100% {
    left: 0px;
  }
}

.parentsbox:hover {
  background-color: #ffffff;
}

.pighead {
  position: absolute;
  top: 0px;
  width: 220px;
  height: 150px;
  background-color: #d2b48c;
  border-radius: 100% / 150% 150% 30% 30%;
  animation-name: bodycolor;
  animation-duration: 8s;
}

@keyframes bodycolor {
  50% {
    background-color: #ffdcdc;
  }
}

.pigear {
  position: absolute;
  top: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 35px 50px 35px;
  border-color: #d2b48c transparent;
  animation-name: listening, earcolor;
  animation-duration: 2s, 8s;
  animation-iteration-count: infinite, 1;
}

@keyframes listening {

  0%,
  50% {
    border-width: 0 35px 50px 35px;
  }
  25%,
  75% {
    border-width: 0 35px 45px 35px;
  }
  100% {
    border-width: 0 35px 50px 35px;
  }
}

@keyframes earcolor {
  50% {
    border-color: #ffdcdc transparent;
  }
}

.ear1 {
  left: 5%;
  transform: rotate(-30deg);
}

.ear2 {
  right: 5%;
  transform: rotate(30deg);
}

/* define styles for the owl's eyes, nose, and mouth */
.pigeye {
  position: absolute;
  top: 15%;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #e5d3b3;
  transition: transform 0.2s ease-in-out;
  animation-name: eyecolor;
  animation-duration: 8s;
}

@keyframes eyecolor {
  50% {
    background-color: #ffc0c0 ;
  }
}


.eye1::before,
.eye2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
}

.pigeye:hover,
.pigeye:hover~.pigeye {
  transform: scale(1.1);
  /* (110% zoom) */
}

.eye1 {
  left: 14%;
}

.eye2 {
  right: 14%;
}

.pigeye p {
  position: absolute;
  top: -330px;
  left: 10px;
  font-size: 200px;
  color: #32271d;
  animation-name: looking;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes looking {

  0%,
  50% {
    top: -330px;
    left: 10px;
  }
  25%,
  75% {
    top: -330px;
    left: 7px;
  }
  100% {
    top: -330px;
    left: 13px;
  }
}

.pignose {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #ff8d41;
  transform: rotate(-90deg);
  left: 100px;
  top: 100px;
  animation-name: headcolor;
  animation-duration: 6s;
}



.pignose p {
  position: absolute;
  transform: rotate(-90deg);
  top: -172px;
  left: -275px;
  font-size: 100px;
  letter-spacing: 40px;
  color: #ff8d41;
}


.pigsmile {
  position: absolute;
  border-radius: 80% / 90% 90% 60% 60%;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 160px;
  border-bottom: none;
  background-color: #d2b48c;
  animation-name: bodycolor;
  animation-duration: 8s;
}