/* BUAT PIG */
/* .parentsbox {
    background-color: yellow;
    height: 300px;
    width: 300px;
    border-radius: 50px;
    margin: 70px;
}

.pighead {
    background-color: pink;
    height: 170px;
    width: 170px;
    border-radius: 100px;
    margin-top: 20px;
    margin-left: 64px;
}

.ear1 {
    position: relative;
    top: -161px;
    left: 50px;
    height: 0px;
    width: 0px;
    border: 45px solid;
    border-color: rgb(255, 0, 251) transparent transparent transparent;
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    transform: rotate(-20deg);
}

.ear2 {
    position: relative;
    top: -253px;
    left: 154px;
    height: 0px;
    width: 0px;
    border: 45px solid;
    border-color: rgb(255, 0, 251) transparent transparent transparent;
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    transform: rotate(20deg);
}

.eye1 {
    position: relative;
    top: -300px;
    left: 100px;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 100px;
    transform: rotate(90deg);
}

.eye2 {
    position: relative;
    top: -345px;
    right: -165px;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 100px;
    transform: rotate(90deg);
}

div.eye1 p,
div.eye2 p {
    transform: scale(10, 10);
    position: relative;
    top: -40px;
    left: 125px;
}

.pignose {
    position: relative;
    top: -358px;
    left: 130px;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 100px;
    transform: scale(1.9, 1.2);
}

div.pignose p {
    transform: scale(4, 7);
    position: relative;
    top: -25px;
    left: 44px;
    color: rgb(255, 0, 251);
}

.pigsmile {
    position: relative;
    top: -370px;
    left: 125px;
    width: 40px;
    height: 27px;
    border-bottom: 8px solid black;
    border-radius: 50%;
} */

/* BUAT STITCH */
body {
    margin: 0px;
    padding: 100px;
    background: radial-gradient(circle at center, #5e9dff, #8b00ff, #2196f3);
}

body:hover {
    background-image: url(https://images5.alphacoders.com/479/479814.png);
    background-size: cover;
}

.parentsbox:before {
    display: none;
}

.pighead {
    position: absolute;
    background: linear-gradient(to bottom, #99ddfd, #5c90de, #0d47a1);
    height: 420px;
    width: 500px;
    border-radius: 155%;
    border-top-right-radius: 1000px;
    border-top-left-radius: 1000px;
    z-index: 2;
}

.pighead:hover {
    background: linear-gradient(to top, rgb(189, 0, 0), #ffbee2);
}

.ear1 {
    background-color: rgb(255, 170, 255);
    position: absolute;
    top: 100px;
    left: 10px;
    height: 300px;
    width: 240px;
    border-top-right-radius: 40px;
    border-top-left-radius: 200px;
    border-bottom-right-radius: 200px;
    border-bottom-left-radius: 0px;
    transform: rotate(-35deg);
    z-index: 1;
}

.ear1:hover {
    transform: translate(25px, -55px) rotate(-25deg);
    background-color: rgb(199, 34, 34);
    transition: 0.4s ease-in;
}

.ear2 {
    background-color: rgb(255, 170, 255);
    position: absolute;
    top: 100px;
    left: 450px;
    height: 300px;
    width: 240px;
    border-top-right-radius: 200px;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 200px;
    transform: rotate(35deg);
    z-index: 1;
}

.ear2:hover {
    transform: translate(-25px, -55px) rotate(25deg);
    background-color: rgb(199, 34, 34);
    transition: 0.4s ease-in;
}

.eye1 {
    background-color: rgb(130, 195, 255);
    position: absolute;
    top: 215px;
    left: 110px;
    width: 250px;
    height: 180px;
    border-radius: 20% 66% 47% 53% / 61% 100% 0% 39%;
    transform: rotate(10deg);
    z-index: 3;
}

@keyframes ngedip {
    0% {
        transform: scaleY(0);
    }

    40% {
        transform: scaleY(1);
    }

    60% {
        transform: scaleY(0);
    }

    90% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }

}

@keyframes ngedip2 {
    0% {
        transform: scaleY(0);
    }

    40% {
        transform: scaleY(1);
        background-color: rgb(199, 34, 34);
    }

    60% {
        transform: scaleY(0);
    }

    90% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }
}

.eye1:before {
    content: '';
    background-color: black;
    position: absolute;
    top: 20px;
    left: 65px;
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 48% 52% / 47% 47% 53% 53%;
    transform: rotate(-20deg);
    z-index: 3;
    animation: ngedip 4.5s infinite;
}

.eye1:after {
    content: '';
    background-color: white;
    position: absolute;
    top: 70px;
    left: 105px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: rotate(-20deg);
    z-index: 3;
    animation: ngedip2 4.5s infinite;
}

.eye1:hover,
.eye2:hover {
    background-color: #0555ce;
    transition: 1s ease-in-out;
}

.eye2 {
    background-color: rgb(130, 195, 255);
    position: absolute;
    top: 215px;
    left: 339px;
    width: 250px;
    height: 180px;
    border-radius: 66% 20% 53% 47% / 100% 61% 39% 0%;
    transform: rotate(-10deg);
    z-index: 3;
}

.eye2:before {
    content: '';
    background-color: black;
    position: absolute;
    top: 20px;
    left: 90px;
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 48% 52% / 47% 47% 53% 53%;
    transform: rotate(20deg);
    z-index: 3;
    animation: ngedip 4.5s infinite;
}

.eye2:after {
    content: '';
    background-color: white;
    position: absolute;
    top: 70px;
    left: 105px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: rotate(-20deg);
    z-index: 3;
    animation: ngedip2 4.5s infinite;
}

div.eye1 p,
div.eye2 p {
    display: none;
}

.pignose {
    background-color: rgb(0, 60, 116);
    position: absolute;
    top: 290px;
    left: 282px;
    width: 140px;
    height: 160px;
    border-radius: 50% 50% 48% 52% / 34% 34% 66% 66%;
    transform: rotate(0deg);
    z-index: 3;
}

.pignose:hover {
    background-color: rgb(199, 34, 34);
    transition: 1s ease-in-out;
}

.pignose:before {
    content: '';
    background-color: rgb(255, 79, 246);
    position: absolute;
    top: 195px;
    left: 7px;
    width: 120px;
    height: 150px;
    border-radius: 0% 0% 48% 52% / 34% 34% 66% 66%;
    transform: rotate(0deg);
    z-index: 3;
}

.pignose:after {
    content: '';
    position: absolute;
    top: 135px;
    left: 6.5px;
    width: 122px;
    height: 55.6px;
    border-bottom: 45px solid rgb(255, 79, 246);
    border-radius: 50%;
    transform: rotate(0deg);
    z-index: 7;
}

div.pignose p {
    display: none;
}

.pigsmile {
    position: absolute;
    top: 300px;
    left: 150px;
    width: 400px;
    height: 180px;
    border-bottom: 45px solid black;
    border-radius: 50%;
    transform: rotate(0deg);
    z-index: 2;
}

.pigsmile:before {
    content: '';
    position: absolute;
    top: 168px;
    left: 290px;
    height: 50px;
    width: 50px;
    background-color: white;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    transform: rotate(-12deg);
    z-index: 4;
}

.pigsmile:after {
    content: '';
    position: absolute;
    top: 168px;
    left: 60px;
    height: 50px;
    width: 50px;
    background-color: white;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    transform: rotate(13deg);
    z-index: 10;
}