.parentsbox {
    height: 500px;
    width: 500px;
    background-color: pink;
    position: relative;
}

.pighead {
    height: 300px;
    width: 300px;
    background-color: #E8BBA0;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    border-radius: 20% 20% 50% 50%;
}

.pighead::after {
    content: " ";
    height: 360px;
    width: 360px;

    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 567.51 494'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2301a1af;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Mikudayo'%3E%3Cg id='Top_Hair' data-name='Top Hair'%3E%3Cpath id='Top_Hair-2' data-name='Top Hair' class='cls-1' d='M291.43,8.16S181.81-37.1,74.19,85.6c0,0-32.68,47.77-31.17,51.79S-14.31,183.74,3.29,297.85A95.48,95.48,0,0,0,29.94,261.6S52.38,496.55,163.1,494c0,0-74.14-78-11.63-272.11,0,0-9.48,71.22,16.26,111.76.42.67.86,1.33,1.3,2,27.36,40.14-.44-.65-.44-.65s34.65-60.79,43.8-133.2c0,0,49.72,169.3,137.8,158.82,0,0-58.93-121.61-41.74-164.35,0,0,168.54,109.12,184.63,135.27s34.7,44.25,27.16,91c0,0,32.18,11.06,47.27-173C567.51,249.53,571.53-49.17,291.43,8.16Z'/%3E%3Cpath class='cls-1' d='M495.34,297.85s-44,174.28-20.53,179,55.65-151.91,55.65-151.91Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;

    position: absolute;
    top: -10%;
    left: -13%;

    border-radius: 20% 20% 0% 0%;

    z-index: 1000;
}


.pigeye>p {
    color: transparent;
}

.pigeye {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104.82 99.32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23123457;%7D.cls-3%7Bfill:%23231f20;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Mikudayo'%3E%3Cg id='Left_Eye' data-name='Left Eye'%3E%3Cpath class='cls-1' d='M102.4,51.33c3,28-17.4,49.64-48.48,47.89C27.2,97.71,5.44,77.78,5.44,51.33S27.16,2.83,53.92,3.45C81,4.07,99.78,26.52,102.4,51.33Z'/%3E%3Cpath class='cls-2' d='M95.71,57.21c0,22.56-15.58,40.85-34.8,40.85S26.12,79.77,26.12,57.21,29,7.88,60.91,16.37,95.71,34.65,95.71,57.21Z'/%3E%3Cellipse class='cls-1' cx='36.05' cy='28.16' rx='9.93' ry='10.69'/%3E%3Cpath class='cls-3' d='M29.56,95.79c.77,0-37.22-28.54-28.17-75.67,0,0,11.07-31.3,66.72-15.82,0,0,32.85,15.13,35.87,27.52s-3,16.08-3,16.08S99,16.55,47.32,7.39C8.38,3.44,11,58.67,18.16,75.84,21,81.68,28.78,95.79,29.56,95.79Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    position: absolute;
    height: 70px;
    width: 70px;
}



.pigeye::before {
    content: " ";
    position: absolute;
    z-index: 50;

    width: 50px;
    height: 5px;
    background-color: black;

    top: -20%;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}

.eye1 {
    top: 245px;
    left: 145px;
}

.eye2 {
    top: 245px;
    left: 285px;

    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.pigsmile {
    height: 20px;
    width: 60px;
    background-color: #A64D44;
    border-radius: 100%;

    position: absolute;
    bottom: 130px;
    left: 220px;
}

.pignose > p {
    display: none;
}

.pignose {
    height: 50px;
    width: 20px;
    background-color: #d1b09b;
    position: absolute;

    top: 280px;
    left: 240px;
    border-radius: 50%;
}

.pigear {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.55 813.64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2347c4d6;%7D.cls-2%7Bfill:%235b525a;%7D.cls-3%7Bfill:%23de156b;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Mikudayo'%3E%3Cpath id='Left_Hair_Ext.' data-name='Left Hair Ext.' class='cls-1' d='M96.84,813.64s-30.17-4.53-70.9-86c0,0-40.73-27.66-20.11-104.1S28.16,553.66,48.42,438,82.26,187.07,131,134.27l18.61-30.18v95s-1.82,112.41,0,125.47,38.72,279.84,42.74,283.86-3,125.71-37.21,130.74c0,0-3.69.84-7.88-6.37,0,0-.5-2.51-8.21,15.09S107.24,811,96.84,813.64Z'/%3E%3Cpolygon class='cls-2' points='205.25 0 147.52 104.09 147.52 183.43 159.37 176 155.76 113.65 216.07 4.53 205.25 0'/%3E%3Cpolygon class='cls-3' points='157.07 168.63 154.72 109.29 213.18 3.32 229.82 6.71 167.46 120.02 169.48 159.24 157.07 168.63'/%3E%3Cpolygon class='cls-2' points='229.82 6.71 167.46 120.02 169.81 161.92 241.55 74.09 237.19 9.05 229.82 6.71'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 300px;
    width: 100px;
    z-index: 1000;
}

.ear1 {
   position: absolute;
   top: 55px;
   left: 35px;

   transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
}

.ear2 {
    position: absolute;
    top: 60px;
    right: 25px;
 
    transform: rotate(-15deg) scaleX(-1);
    -webkit-transform: rotate(-15deg) scaleX(-1);


}