.parentsbox {
    width: 700px;
    height: 700px;
    background-color: aquamarine;
    position: relative;
}

.pighead::after {
    content: "";
    width: 215px;
    height: 215px;
    border-radius: 100% 100% 100% 100%;
    background:
        radial-gradient(100% 95% at 50% 100%, #ddb288 100%, #0000) top,
        radial-gradient(100% 100% at 50% 100%, #0000 100%, #0000) bottom/100% 85%, #0000;
    position: absolute;
    left: 246px;
    top: 149px;
    transform: rotate(-2deg);
    border: 0.5px solid black;
    z-index: 3;
}

.pighead::before {
    content: "";
    position: absolute;
    width: 270px;
    height: 100px;
    background-color: black;
    top: 149px;
    left: 347px;
    --c: black;
    background:
        conic-gradient(from 20deg at 0 100%, var(--c) 30deg, #0000 0) 6% 0/15% 100%,
        radial-gradient(100% 70% at 100% 100%, #0000 98%, var(--c))25% 0px/20% 60%,
        radial-gradient(100% 73% at 0% 100%, #0000 98%, var(--c))45% 0px/20% 70%,
        radial-gradient(100% 40% at 100% 100%, #0000 98%, var(--c))70% 0px/20% 60%,
        radial-gradient(100% 73% at 0% 100%, #0000 98%, var(--c))20% 0px/20% 70%,
        radial-gradient(100% 40% at 100% 100%, #0000 98%, var(--c))45% 0px/20% 40%,
        radial-gradient(50% 100% at 50% 0, var(--c) 98%, #0000)3% 54%/15% 7%,
        radial-gradient(100% 102% at 0 0, #0000 98%, var(--c)) 0 0/16% 50%,
        radial-gradient(50% 100% at 50% 0, var(--c) 98%, #0000) 98% 33%/28% 10%,
        radial-gradient(87% 102% at 100% 0, #0000 98%, var(--c))102% 0/15% 30%,
        conic-gradient(from -44deg at 100% 100%, var(--c) 30deg, #0000 0)96% 101%/22% 100%;
    background-repeat: no-repeat;
    transform: translate(-50%) rotate(-4deg);
    border-radius: 58% 32.5% 0 0;
    z-index: 7;
}


.pigear {
    position: absolute;
    width: 5%;
    height: 12%;
    background: #ddb288;
    right: 26%;
    top: 60.5%;
    border-radius: 50%;
    transform: rotate(-4deg);
    border: 1px solid #222;
    z-index: 2;
}
.pigear::after {
    content: "";
    position: absolute;
    width: 55%;
    height: 65%;
    background: #9b7d5f;
    border-radius: 50%;
    top: 10%;
    left: 40%;
    border: 1px solid #222;
}

.pigear::before {
    content: "";
    position: absolute;
    width: 85%;
    height: 85%;
    background: rgb(173, 147, 130);
    border-radius: 50%;
    left: 16%;
    top: 8%;
    border: 1px solid #222;
}

.ear1 {
    position: absolute;
    top: 210px;
    left: 225px;
}

.ear2 {
    position: absolute;
    transform: scaleX(-1);
    top: 210px;
    left: 446px;
}

.pigeye {
    width: 50px;
    height: 50px;
    background-color: aliceblue;
    border-radius: 55% 56% 50% 50%;
    border: 1px solid rgb(42, 42, 42);
}

.eye1 {
    position: absolute;
    bottom: 440px;
    left: 280px;
    z-index: 5;
}

.eye2 {
    content: "";
    position: absolute;
    bottom: 440px;
    left: 370px;
    transform: rotate(100px);
    z-index: 5;
}

.eye1::after {
    content: "";
    width: 13px;
    height: 10px;
    position: absolute;
    top: 45px;
    left: 75px;
    transform: translate(-50%);
    background: radial-gradient(farthest-side, #564135 30%, #7e685b 50%, #0000) 0 90%/42% 8% no-repeat;
}

.eye2::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 14%;
    left: 18px;
    top: 48px;
    border-radius: 0 0 97% 29%;
    border-bottom: 2px solid #54463d;
    clip-path: inset(0 8% 0 7%);
}

.pignose::after {
    content: "";
    width: 200px;
    height: 30px;
    border-radius: 50% 50% 50% 50%;
    border: 100px solid #967f56;
    border-bottom: transparent;
    border-top: 35px soli;
    position: absolute;
    top: 130px;
    left: 147px;
    transform: rotate(-5deg);
    z-index: 1;
}

.pignose::before {
    content: "";
    width: 250px;
    height: 150px;
    top: 20px;
    position: absolute;
    background:
        radial-gradient(65% 100% at 50% 100%, #811e2f 98%, #222, #0000) bottom/100% 53%, #967f56;
    left: 50%;
    background-repeat: no-repeat;
    transform: translate(-54%) rotate(-4deg);
    border-radius: 50% 50% 0 0/69% 69% 0 0;
    border: 1px solid #222;
    z-index: 0;
}

.pigsmile::before {
    content: "";
    width: 100%;
    height: 110%;
    background-color: transparent;
    border-radius: 50% 50% 15% 15%;
    position: absolute;
    border-bottom: 2px solid rgb(104, 104, 104);
    top: -49px;
    clip-path: inset(0 3% 0 3%);
}

.pigsmile::after {
    content: "";
    width: 50%;
    height: 31%;
    position: absolute;
    top: -60px;
    left: 43%;
    transform: translate(-50%) rotate(-95deg);
    background: radial-gradient(farthest-side, #564135 30%, #7e685b 50%, #0000) 0 90%/42% 8% no-repeat;
}

.pigsmile {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border: 0.5px solid black;
    width: 170px;
    height: 82px;
    border-radius: 10px 10px 100px 100px;
    top: 270px;
    left: 270px;
    z-index: 3;
}

.pigeye p {
    width: 14px;
    height: 14px;
    background-color: #222;
    border-radius: 50%;
    position: relative;
    top: 2px;
    left: 18px;
    text-align: center;
    color: transparent;
}