.parentsbox{
    background-color: rgb(255, 255, 0);
    width: 500px;
    height: 500px;
    margin: auto;
    margin-top: 100px;
    transition: ease-in-out 0.5s;
    position: relative;
}

.pighead{
    background-color: #bb5e00;
    width: 300px;
    height: 270px;
    border-radius: 100%;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 2;
}

.pigear{
    background-color: #733b02;
    border: 15px solid #bb5e00 ;
    width: 85px;
    height: 85px;
    z-index: 1;
}

.ear1{
    position: absolute;
    border-radius: 100px;
    left: 110px;
    top: 65px;
}
.ear2{
    position: absolute;
    border-radius: 100px;
    left: 270px;
    top: 65px;
}

.pigeye{
    background-color: black;
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 100px;
    z-index: 7;
}

.pigeye p{
    position: absolute;
    color: white;
    top: -87px;
    left: 7px;
    font-size: 50px;
}

.pigeye{
    position: absolute;
    left: 190px;
    top: 225px;
}

.eye2{
    position: absolute;
    left: 290px;
    top: 225px;
}

.pignose{
    position: absolute;
    z-index: 3;
    width: 150px;
    height: 100px;
    border-radius: 100%;
    border: 1px solid #733b02;
    background-color: #efbc88;
    top: 220px;
    left: 175px;
}

.pignose p::before{
    content: "............";
    background-color: #733b02;
    z-index: 4;
    position: relative;
    font-size: 8px;
    padding: 10px;
    top: -4px;
    left: 53px;
    border-radius: 80px 80px 200px 200px;
    color: #733b02;
}

.pignose p::after{
    content: ".";
    color: transparent;
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    top: 53px;
    left: 55px;
}

.pignose{
    position: relative;
    color: transparent;
}

.eye1 p::after{
    content: "|";
    color: #733b02;
    position: absolute;
    top: 65px;
    left: 50px;
    border-radius: 100%;
    color: #733b02;
}

.pigsmile{
    position: absolute;
    z-index: 6;
    background-color: #efbc88;
    border-bottom: 3px solid #733b02 ;
    width: 40px;
    height: 40px;
    border-radius: 100% 100% 70% 70%;
    left: 212.4px;
    top: 275px;
}

.pigsmile::after{
    content: ".";
    color: transparent;
    position: absolute;
    z-index: 6;
    background-color: #efbc88;
    border-bottom: 3px solid #733b02 ;
    width: 40px;
    height: 40px;
    border-radius: 100% 100% 70% 70%;
    left: 38.9px;
}

.parentsbox:hover .pignose p::after{
    background-color: #733b02;
    transition: linear 0.1s;
}

.parentsbox:hover .pigeye{
    border-top: 6px solid black;
    background-color: transparent;
    transition: ease 0.1s;
}

.parentsbox:hover .pigeye p{
    color: transparent;
}

.parentsbox:hover{
    box-shadow: 20px 20px 25px rgb(178, 176, 176);
    margin-top: 85px;
}

.parentsbox:hover
.pighead::after{
    content: "///";
    text-align: center;
    font-size: 20px;
    width: 40px;
    height: 25px;
    border-radius: 100%;
    background-color: rgb(253, 105, 105);
    position: absolute;
    left: 221px;
    top: 140px;
}

.parentsbox:hover
.pigsmile::before{
    content: "///";
    text-align: center;
    font-size: 20px;
    width: 40px;
    height: 25px;
    border-radius: 100%;
    background-color: rgb(253, 105, 105);
    position: absolute;
    left: -73px;
    top: -35px;
}

.ear1::after{
    content: "Hover your cursor over my head to make me smile :)";
    width: 400px;
    position: absolute;
    font-size: 30px;
    text-align: center;
    top: 315px;
    left: -70px;
    color:#bb5e00;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 900;
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: #733b02;
}

.parentsbox:hover .ear1::after{
    content:"I'm cute, right?";
}

.parentsbox:before,
.parentsbox:after{
	position: absolute;
	content: '';
	border-style: solid;
	border-color: #bb5e00;
	transition: .5s;
}

.parentsbox:before{
	width: 498px;
	height: 0%;
	border-width: 0 2px;
	top: 50%;
	transform: translate(0px, -50%);
}

.parentsbox:after{
	width: 0%;
	height: 498px;
	top: -1px;
	left: 50.2%;
	transform: translate(-50%,0px);
	border-width: 2px 0;
}

.parentsbox:hover:before{
	height: 100%;
}

.parentsbox:hover:after{
	width: 100%;
}

.pighead::before{
    content: "Richie Reuben Hermanto - 0706012210035";
    top: -140px;
    left: -30px;
    font-weight: 900;
    width: 500px;
    font-size: 20px;
    position: absolute;
}