:root {
    --ppig: pink;
    --ppig-accent: #F998A8;
    --ppig-background-color: #048877
}

.ppig {
    position: absolute;
}
.ppig.move{
    animation: ppigmove 40s infinite;
}
.ppigupdownmove{
    animation: ppigupdownmove 1s;
}
@keyframes ppigmove {
    40% {transform: translateX(50%);}
    50% {transform: translateX(50%);}
    80% {transform: translateX(-50%);}
    90% {transform: translateX(-50%);}
}
@keyframes ppigshow {
    100% {transform: translateX(-50%);}
}

@keyframes ppigupdownmove {
    10% {transform: translateY(-10%);}
    20% {transform: translateY(0%);}
    40% {transform: translateY(-10%);}
    60% {transform: translateY(-10%);}
    80% {transform: translateY(0%);}
    90% {transform: translateY(-10%);}
}

.ppighead {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50% 50% 50% 50%;
    background: var(--ppig);
    box-shadow: 0 1px 0 0 var(--ppig-accent);
}

.headshake{
    animation: headshake 1s;
}

@keyframes headshake {
    10% {transform: rotate(20deg)}
    20% {transform: rotate(-20deg)}
    30% {transform: rotate(15deg)}
    40% {transform: rotate(-15deg)}
    50% {transform: rotate(10deg)}
    60% {transform: rotate(-10deg)}
    70% {transform: rotate(5deg)}
    80% {transform: rotate(-5deg)}
    90% {transform: rotate(5deg)}
}

.ppigearleft {
    content: '';
    position: absolute;
    left: -5%;
    top: -5%;
    width: 45%;
    height: 45%;
    background: var(--ppig-accent);
    border-radius: 50%;
    clip-path: polygon(30% 100%, 0% 0%, 100% 10%);
    z-index: 2;
}

.ppigearright {
    content: '';
    position: absolute;
    right: -5%;
    top: -5%;
    width: 45%;
    height: 45%;
    background: var(--ppig-accent);
    border-radius: 50%;
    clip-path: polygon(60% 100%, 0% 0%, 100% 10%);
    z-index: 2;
}

.ppignose {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: var(--ppig-accent);
    width: 25%;
    height: 20%;
    border-radius: 40%
}

.ppignose::before {
    content: '';
    position: absolute;
    left: 15%;
    top: 20%;
    height: 50%;
    width: 20%;
    background: var(--ppig);
    border-radius: 50%
}

.ppignose::after {
    content: '';
    position: absolute;
    right: 15%;
    top: 20%;
    height: 50%;
    width: 20%;
    background: var(--ppig);
    border-radius: 50%
}

.ppigeye{
  position: absolute;
  top: 35%;
  left: 20%;
  width: 50%;
  height: 100%;
}

.ppigeye span{
  position: absolute;
  left: 10%;
  width: 20%;
  height: 10%;
  background-color: #27221e;
  border-radius: 60%;
}

.ppigeye span:nth-child(2){
  left: 90%
}

.ppigeye span:before{
  width: 30%;
  height: 30%;
  border-radius: .12rem;
  background-color: #fff;
  top: 20%;
  left: 50%;
  position: absolute;
  content: "";
}

.ppigeye span:after{
  left: 0%;
  top: -200%;
  width: 100%;
  height: 200%;
  background-color: var(--ppig);
  border-radius: 50%;
  z-index: 1;
  position: absolute;
  content: "";
  -webkit-animation:eye 1.4s ease-in infinite;
}

@-webkit-keyframes eye {
  0% { transform: translate3d(0, 0, 0);}
  40% { transform: translate3d(0, 0, 0);}
  50% { transform: translate3d(0, 60%, 0);}
  60% { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(0, 0, 0);}
}

.ppigsmile {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 10%;
    border-bottom: 3px solid var(--ppig-accent);
    border-radius: 50%
}

.ppigbody {
    position: absolute;
    left: 15%;
    top: 30%;
    width: 70%;
    height: 50%;
    background: var(--ppig);
    box-shadow: -3px -1px 0 0 var(--ppig-accent);
    border-radius: 50% 50% 50% 50%;
}

.ppigtailone {
    content: '';
    position: absolute;
    right: -12%;
    top: 25%;
    width: 15%;
    height: 25%;
    border-radius: 50%;
    box-shadow: 5px 2px 0 0 var(--ppig);
    transform: rotate(45deg)
}

.ppigtailtwo {
    content: '';
    position: absolute;
    top: 32%;
    right: -20%;
    width: 10%;
    height: 20%;
    border-radius: 50%;
    box-shadow: -3px -1px 0 0 var(--ppig);
    transform: rotate(-45deg)
}

.ppigleg {
    position: absolute;
    height: 20%;
    width: 10%;
    border-radius: 20% 20% 20% 20%
}

.ppigleg.foreright {
    left: 22%;
    bottom: 10%;
    background: var(--ppig-accent);
    transform-origin: top;
    animation: flegmove 3s infinite;
}

.ppigleg.foreleft {
    bottom: 10%;
    left: 25%;
    background: var(--ppig);
    transform-origin: top;
    animation: blegmove 3s infinite;
}


.ppigleg.backright {
    right: 25%;
    bottom: 10%;
    background: var(--ppig-accent);
    transform-origin: top;
    animation: flegmove 3s infinite;
}


.ppigleg.backleft {

    bottom: 10%;
    right: 22%;
    background: var(--ppig);
    transform-origin: top;
    animation: blegmove 3s infinite;
}

.ppigleg::befores {
    content: '';
    position: absolute;
    left: 20%;
    height: 100%;
    width: 100%;
    background: var(--ppig);
    border-radius: 20% 20% 20% 20%;
    transform-origin: top;
    /*animation: blegmove 3s infinite;*/
}

@keyframes flegmove {
    25% {transform: rotate(0deg)}
    50% {transform: rotate(-8deg)}
    75% {transform: rotate(0deg)}
    100% {transform: rotate(8deg)}
}

@keyframes blegmove {
    25% {transform: rotate(0deg)}
    50% {transform: rotate(8deg)}
    75% {transform: rotate(0deg)}
    100% {transform: rotate(-8deg)}
}