body {
    background: radial-gradient(rgb(181, 255, 255) 40%,rgb(255, 255, 174));

    animation-name: transform5;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes transform5 {
    14.2% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(231, 255, 174));}
    28.4% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(200, 255, 174));}
    42.6% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(180, 255, 174));}
    56.8% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(200, 255, 174));}
    73% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(231, 255, 174));}
    87.2% {background: radial-gradient(rgb(181, 255, 255) 40%,rgb(255, 255, 174));}
}

.pignose p {
    color: transparent;
}

.eye1 p {
    position: absolute;
    top: -690px;
    left: -5px;
}

.eye2 p {
    position: absolute;
    top: -410px;
    left: -5px;
}

.parentsbox {
    position: relative;
    top: 100px;
    left: 500px;

    background-color: rgb(244, 244, 244);
    border-radius: 51% 50% 37% 44% / 71% 72% 34% 35% ; 
    border-top: 30px solid rgb(181, 255, 255);
    width: 190px;
    height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
}

.pighead {
    position: absolute;

    top: 0px;
    left: 20px;
    width: 100%;
    height: 50px;
    background: linear-gradient(-114deg, rgb(181, 255, 255) 20px, transparent 10px), linear-gradient(114deg, rgb(181, 255, 255) 20px, transparent 10px);
    background-size: 37px;
    background-position: 20px;
}

.pigear {
    position: absolute;
    top: 230px;
    left: 80px;

    background-color: rgb(244, 244, 244);
    border-radius: 5px;
    height: 100px;
    width: 45px;    
}

.ear1 {
    position: absolute;
    top: 68px;
    left: 17px;

    border:  13px solid rgb(209, 9, 9);
    border-radius: 35% 40% 36% 55% / 28% 18% 89% 74%;
    width: 127px;
    height: 45px;
    clip-path: polygon(0 50%, 100% 38%, 99% 100%, 0% 100%);
    transform: rotate(-178deg);

    animation-name: transform;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes transform {
    33% {top: 30px;}
    33% {width: 120px;}
    66% {top: 68px;}
    66% {width: 127px;}
}

.ear2 {
    
}

.eye1 {
    position: absolute;
    top: 113px;
    left: 28px;

    background: white;
    height: 70px;
    width: 70px;
    border-radius: 50px;
    border-bottom: 1px solid rgb(179, 179, 179);
    border-right: 1px solid rgb(179, 179, 179);

    font-size: 390px;

    animation-name: transform3;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes transform3 {
    33% {font-size: 380px;} 
    66% {font-size: 390px;}
}

.eye2 {
    position: absolute;
    top: 123px;
    left: 115px;

    background: white;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    border-bottom: 1px solid rgb(179, 179, 179);
    border-left: 1px solid rgb(179, 179, 179);

    font-size: 230px;
}

.pignose {
    position: absolute;
    top: 190px;
    left: 65px;

    border: 8px solid rgb(23, 124, 255);
    border-radius: 35% 40% 36% 55% / 28% 28% 74% 74%;
    width: 78px;
    height: 40px;
    transform: rotate(-13deg);

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

    z-index: 2;
}

@keyframes transform2 {
    33% {top: 200px;}
    33% {border-radius: 35% 40% 36% 55% / 50% 50% 50% 50%;}
    33% {width: 50px;}
    33% {height: 30px;}
    66% {top: 210px;}
    66% {left: 60px;}
    66% {border-radius: 50% 40% 36% 50% / 28% 18% 89% 74%;}
    66% {width: 78px;}
    66% {height: 6px;}
    66% {transform: rotate(0deg);}
    85% {top: 190px;}
    85% {left: 65px;}
    85% {border-radius: 35% 40% 36% 55% / 28% 28% 74% 74%;}
    85% {width: 78px;}
    85% {height: 40px;}
}

.pigsmile {
    position: absolute;
    top: 225px;
    left: 87px;

    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 35px solid rgb(34, 0, 109);
    border-bottom: 35px solid rgb(34, 0, 109);
    transform: rotate(90deg);

    animation-name: transform4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes transform4 {
    33% {transform: rotate(450deg);}
    33% {top: 280px;}
    33% {border-top: 35px solid rgb(255, 200, 0);}
    33% {border-bottom: 35px solid rgb(255, 200, 0);}
    66% {transform: rotate(90deg);}
    66% {top: 225px;}
    66% {border-top: 35px solid rgb(34, 0, 109);}
    66% {border-bottom: 35px solid rgb(34, 0, 109);}
}


/*position: absolute;
    top: 138px;
    left: 16px;

    border: 12px solid rgb(23, 124, 255);
    border-radius: 32% 43% 39% 52% / 20% 21% 86% 72%;
    width: 130px;
    height: 60px;
    clip-path: polygon(0 99%, 100% 60%, 99% 100%, 0% 100%);
    transform: rotate(-9deg);*/

/*position: absolute;
    top: 162px;
    left: 54px;

    border: 12px solid rgb(23, 124, 255);
    border-radius: 32% 43% 39% 52% / 20% 21% 86% 72%;
    width: 90px;
    height: 65px;
    clip-path: polygon(0 50%, 100% 35%, 99% 100%, 0% 100%);
    transform: rotate(-15deg)*/

/*position: absolute;
    top: 200px;
    left: 65px;

    border: 8px solid rgb(23, 124, 255);
    border-radius: 35% 40% 36% 55% / 50% 50% 50% 50%;
    width: 55px;
    height: 30px;
    transform: rotate(-13deg);*/