.parentsbox{
    top: 200px;
    left: 200px;

    width: 200px;
    height: 200px;
    border-radius: 145% 0 145% 145%;
    background-color: lightcyan;
    transform: rotate(-45deg);
    transform-origin: top center;
    position: relative;
    transition-duration: 200ms;
    transition-property: top, box-shadow;
    }
    .parentsbox:hover{
    top: 220px;
    left: 200px;
    box-shadow: 10px -10px 2px 0 lightslategray;

    }
    .parentsbox::after{
        content: "Bryan Samuel 0706012210061";
        position: absolute;
        transform: rotate(45deg);
        top: 165px;
        right: 135px;
        
    }
   





    .pighead{
    background-color:coral;
    height: 100px;
    width: 100px;
    border-radius: 100px 85px 100px 85px;
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 3;
    box-shadow: 10px -8px 0 0 wheat,10px -8px 1px 0.5px black, inset -2px 2px  2px 0 black;
    }
    .pighead::before{
        content: 'Hover to save me!';
        position: absolute;
        font-size: 11pt;
        top: 10px;
        right: -90px;
        transform: rotate(90deg);
        
    }
    .parentsbox:hover .pighead::before{
        content: "YAY I'm Free!";
        position: absolute;
        font-size: 10pt;
        top: 55px;
        right: 105px;
        transform: rotate(45deg);
        
    }



    .pigear {
    background-color: wheat;
    width: 25px;
    height: 25px;
    border-radius: 40% 50% 40% 10%;
    z-index: 1;
    box-shadow: inset -2px 2px 0.5px 0.5px black;
    
    }
    .ear1{
    position: absolute;
    top: 150px;
    
    right: 85px;
    transform: rotate(135deg);
    transition-property: top, right,z-index;

    
    }
    .parentsbox:hover .ear1{
    top: 150px;
    
    right: 75px;
    transform: rotate(120deg);

    }
    .ear2{
    position: absolute;
    top: 85px;
    
    right: 150px;
    transform: rotate(-135deg);
    
    }
    .parentsbox:hover .ear2{
        top: 75px;
        
        right: 150px;
        transform: rotate(-120deg);
    }
    .pigeye {
    background-color: cornsilk;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100% 75% 100% 75%;
   
    transition-property: top, right,z-index;
    
    }
    
    .pigeye p{
        font-size: 200px;
        
    }
    .eye1{
        position: absolute;
        top: 80px;
        right: 60px;
        z-index: 200;
        transition-duration: 0ms;
        transition-property: z-index;
    
       
    }


    .eye1 p{
    position:absolute;  
    top: -350px;
    right: -10px;
    z-index: 250;
    transition-duration: 0ms;
    transition-property: top, right;
    }

    .parentsbox:hover .eye1 p{
        top: -342px;
        right: 12px; 
       

    }
    .parentsbox:hover .eye1{
        z-index: 300;
    }






    .eye2{
    position: absolute;
    top: 60px;
    right: 80px;
    z-index: 200;
    transition-duration: 0ms;
    transition-property: z-index;
    
   
    }
    .eye2 p{
        position:absolute;
        top: -350px;
        right: -10px;
        z-index: 350;
        transition-duration: 0ms;
        transition-property: top, right;
    }
    .parentsbox:hover .eye2 p{
            top: -342px;
            right: 12px;
            
          
           
    
    }
    .parentsbox:hover .eye2{
        z-index: 210;
    }

        
    .pignose{
        position: absolute;
        background-color:coral;
        top: 110px;
        right: 35px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow:10px 10px 0 0 wheat, -10px 10px 0 0 wheat, inset -1px -1px 0 0 black;
        z-index: 1;
        transform: rotate(-45deg);
        transition-duration: 0ms;
        transition-property: transform, top, right, box-shadow;
    }
    .pignose p{
        color: transparent;
       
    }
    .parentsbox:hover .pignose{
        transform: rotate(225deg);
        top: 35px;
        right:35px;
        box-shadow:10px 10px 0 0 wheat, -10px 10px 0 0 wheat, inset 0.5px -0.5px 0 0 black,   inset -0.5px -0.5px 0 0 black;

    }
    
    .pigsmile{
        position: absolute;
        background-color:transparent;
        top: 115px;
        right: 115px;
        width: 20px;
        height: 20px;
        border-radius: 120% 65% 120% 65%;
        box-shadow: 1.5px 1.5px black;
        
        z-index: 100;
        transform: rotate(-90deg);
        transition-duration: 0ms;
        transition-property: transform, top, right;
    }
    .parentsbox:hover .pigsmile{
        transform: rotate(90deg);
        top: 107px;
        right:107px;


    }