body {
    background-color: darkgrey;
    animation: myColourChangeBody;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.parentbox {
    background-color: rgb(91, 91, 91);
    transform: translate(-50%, -50%);
    height: 500px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 20%;
    animation: myColourChange;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.parentbox::after {
    content: "Benedict K. S. - 0706012210037";
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border: 1px solid white;
    color: white;
    top: 85%;
    padding: 15px;
    border-radius: 5px;
    position: absolute;
    left: 130px;
}

.pighead {
    background-color: rgb(28, 28, 28);
    height: 50%;
    width: 50%;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border: 0;
    border-radius: 120% / 30% 30% 180% 180%;
    border-bottom: 10px solid black;
}

.ear1 {
    height: 30%;
    width: 15%;
    top: 10%;
    right: 25%;
    position: absolute;
    border-radius: 120% / 40% 40% 180% 180%;
    transform: rotate(-180deg);
    background-color: rgb(28, 28, 28);
    border-bottom: 10px solid black;
}

.ear2 {
    height: 30%;
    width: 15%;
    top: 10%;
    left: 25%;
    position: absolute;
    border-radius: 120% / 40% 40% 180% 180%;
    transform: rotate(180deg);
    background-color: rgb(28, 28, 28);
    border-bottom: 10px solid black;
}

.pigeye {
    width: 6%;
    height: 3%;
    top: 40%;
    position: absolute;
    background-color: black;
    border: 2vmin solid goldenrod;
    border-radius: 140%/ 10% 10% 350% 350%;
    transform: rotate(0deg);
    z-index: 3;
    border-top-width: 0px;
    border-bottom-width: 3px;
}

.eye1 {
    color: goldenrod;
    right: 33%;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    transform: rotate(-10deg);
}

.eye2 {
    color: goldenrod;
    left: 33%;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    transform: rotate(10deg);
}

.pignose {
    height: 6%;
    width: 8%;
    top: 58%;
    left: 46%;
    border-radius: 120% / 40% 40% 180% 180%;
    background-color: black;
    position: absolute;
    text-align: center;
    color: rgb(28, 28, 28);
}

.pigsmile {
    height: 5%;
    width: 5%;
    border: solid 7px black;
    border-color: black black transparent transparent;
    position: absolute;
    left: 46%;
    top: 65%;
    transform: rotate(-45deg);
}

@keyframes myColourChange {
    20% {
        background-color: rgb(91, 91, 91);
    }

    40% {
        background-color: rgb(28, 28, 28);
    }

    60% {
        background-color: rgb(28, 28, 28);
    }

    80% {
        background-color: rgb(28, 28, 28);
    }

    100% {
        background-color: rgb(91, 91, 91);
    }
}

@keyframes myColourChangeBody {
    20% {
        background-color: darkgray;
    }

    40% {
        background-color: rgb(28, 28, 28);
    }

    60% {
        background-color: rgb(28, 28, 28);
    }

    80% {
        background-color: rgb(28, 28, 28);
    }

    100% {
        background-color: darkgray;
    }

    ;
}