.parentsbox {
    background-color: lightslategrey;
    height: 500px;
    width: 500px;
    border-radius: 100px;
    position: absolute;
}

.parentsbox::after{
    position: absolute;
    content: "Jason Miracle Gunawan";
    width: 500px;
    height: 100px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    top: 425px;
    z-index: 3;
}

.pighead {
    background-color: #ffe7be;
    width: 250px;
    height: 300px;
    position: absolute;
    top: 110px;
    left: 125px;
    border-top-left-radius: 30%;
    border-end-start-radius: 50%;
    border-top-right-radius: 30%;
    border-end-end-radius: 50%;
    perspective: 800px;
    z-index: 2;

}

.parentsbox:hover .pighead::before {
    box-shadow: inset 0 0 0 25px red;
}

.pighead::before {
    content: "";
    box-shadow: inset 0 0 0 25px rgb(106, 178, 222);
    border-end-end-radius: 45%;
    border-end-start-radius: 45%;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    height: 300px;
    width: 250px;
    display: block;

}

.parentsbox:hover .pighead::after {
    background-color: rgb(240, 32, 32);
}

.pighead::after {
    content: "";
    background-color: rgb(99, 182, 233);
    position: relative;
    border-radius: 70%;
    top: -370px;
    width: 250px;
    height: 200px;
    display: block;
    transform: rotateX(30deg);

}

.pigear {
    width: 0px;
    height: 0px;
}

.parentsbox:hover .ear1 {
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 75px solid turquoise;
}

.ear1 {
    perspective: 1000px;
    position: absolute;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 75px solid red;
    border-radius: 35%;
    top: 155px;
    margin-left: 223px;
    z-index: 3;
}

.ear1::before {
    content: "";
    display: block;
    background-color: blue;
    border-radius: 10%;
    height: 150px;
    width: 30px;
    margin-left: -15px;
    margin-top: -185px;
    transform: rotateX(65deg);
}

.pigear.ear2 {
    position: absolute;
    z-index: 1;
}

.pigear.ear2::before {
    width: 100px;
    height: 100px;
    content: "";
    display: block;
    border-radius: 100%;
    margin-top: 140px;
    margin-left: 80px;
    background-color: rgb(63, 113, 145);
    transform: rotateY(60deg);
}

.pigear.ear2::after {
    position: relative;
    width: 100px;
    height: 100px;
    content: "";
    display: block;
    border-radius: 100%;
    margin-top: -118px;
    margin-left: 320px;
    background-color: rgb(63, 113, 145);
    transform: rotateY(60deg);
}

.parentsbox:hover .pigear.ear2::before {
    background-color: lightgray;
}

.parentsbox:hover .pigear.ear2::after {
    background-color: lightgray;
}

.pigeye.eye1 {
    position: relative;
    height: 30px;
    width: 50px;
    transform: rotate(90deg);
    top: 250px;
    left: 190px;
    z-index: 3;
}

.pigeye.eye1::before {
    position: relative;
    content: "";
    display: block;
    border-radius: 100%;
    height: 25px;
    width: 50px;
    background-color: black;
}

.pigeye.eye1::after {
    position: relative;
    content: "";
    display: block;
    border-radius: 100%;
    top: -12px;
    left: 9px;
    height: 10px;
    width: 20px;
    background-color: white;
    animation: sideeye 1s infinite;
}

.pigeye.eye2 {
    position: relative;
    height: 30px;
    width: 50px;
    transform: rotate(90deg);
    top: 220px;
    left: 260px;
    z-index: 3;

}

.pigeye.eye2::before {
    position: relative;
    content: "";
    display: block;
    border-radius: 100%;
    bottom: -5px;
    height: 25px;
    width: 50px;
    background-color: black;
}

.pigeye.eye2::after {
    position: relative;
    content: "";
    display: block;
    border-radius: 100%;
    top: -8px;
    left: 10px;
    height: 10px;
    width: 20px;
    background-color: white;
    animation: sideeye 1s infinite;
}

div p {
    display: none;
}

.pignose {
    top: 305px;
    left: 240px;
    position: absolute;
    height: 0px;
    width: 10px;
    border-bottom-right-radius: 60%;
    border-bottom-left-radius: 60%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 30px solid #c6b08e48;
    transform: rotateX(60deg) rotateZ(0deg);
    z-index: 2;
}

.pigsmile {
    position: absolute;
    height: 0px;
    width: 50px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 200%;
    border-bottom: 25px solid black;
    border-left: 5px solid black;
    border-right: 5px solid black;
    top: 340px;
    left: 220px;
    transform: skew(20deg, 10deg);
    z-index: 2;
}

.pigsmile::before {
    content: "";
    display: block;
    z-index: 2;
    position: relative;
    width: 50px;
    height: 5px;
    background-color: white;
}

@keyframes sideeye {
    0% {
        transform: translateY(2px);
    }

    10%{
        transform: translateY(1px);
    }

    20%{
        transform: translateY(0px);
    }

    30%{
        transform: translateY(-1px);
    }

    40%{
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(-3px);
    }

    60%{
        transform: translateY(-2px);
    }

    70%{
        transform: translateY(-1px);
    }

    80%{
        transform: translateY(0px);
    }

    90%{
        transform: translateY(1px);
    }

    100%{
        transform: translateY(2px);
    }

}