body {
    background-color: white;
}
p{
    color: rgb(255, 255, 255);
    position: relative;
    bottom: 340px;
    right: 7px;
    font-size: 190px;

}

.parentsbox:hover{
 
        background: linear-gradient(to right, #5581F1, #1153FC);
    
}
.parentsbox {
    border: solid;
    border-color: yellow;
    border-radius: 10em;
    background-color: yellow;
    width: 40em;
    height: 40em;
}

.pighead {
    border: solid;
    border-color: pink;
    background-color: pink;
    border-radius: 100%;
    width: 300px;
    height: 300px;
    position: relative;
    top: 3em;
    right: -10em;
}
.pighead:hover{
    background: linear-gradient(to right, #8d00f2, hsl(285, 93%, 35%));
    border-style: (to right, #8d00f2, hsl(285, 93%, 35%));
}

.pigear1 {
    width: 90px;
    height: 90px;
    border-bottom-left-radius: 16em;
    background-color: magenta;
    transform: rotate(106deg);
    position: relative;
    bottom: 264px;
    left: 140px;
}
.pigear1:hover{
    background: linear-gradient(to right, #8d00f2, hsl(205, 80%, 72%));
    border-color: linear-gradient(to right, #8d00f2, hsl(285, 93%, 35%));
}

.pigear2:hover{
    background: linear-gradient(to right, #8d00f2, hsl(205, 80%, 72%));
    border-color: linear-gradient(to right, #8d00f2, hsl(285, 93%, 35%));
}


.pigear2 {
    width: 90px;
    height: 90px;
    border-bottom-left-radius: 16em;
    background-color: magenta;
    transform: rotate(166deg);
    position: relative;
    bottom: 352px;
    right: -390px;
}

.pigeye1 {
    position: relative;
    bottom: 349px;
    left: 240px;
    border: solid;
    border-radius: 50%;
    border-color: white;
    background-color: white;
    width: 45px;
    height: 45px;
}

.pigeye2 {
    position: relative;
    bottom: 399px;
    left: 350px;
    border: solid;
    border-radius: 50%;
    border-color: white;
    background-color: white;
    width: 45px;
    height: 45px;
}

.pignose {
    border: solid;
    border-radius: 100%;
    height: 40px;
    width: 80px;
    position: relative;
    border-color: white;
    background-color: white;
    bottom: 370px;
    left: 270px;
}


.pigsmile {
    width: 80px;
    height: 90px;
    background: radial-gradient(circle at 50% 120%, transparent 80px, black 5px);
    border-radius: 50%;
    transform: rotate(179deg);
    position: relative;
    left: 273px;
    bottom: 399px;
}
.pigsmile:hover {
    position: relative;
    bottom: 350px;
    left: 265px;
    transform: rotate(0deg); 
    height: 50px;
    width: 100px;
    background: radial-gradient(circle at 50% 220%, transparent 80px, rgb(69, 1, 63) 5px); 
}
.pignose::after{
    content: "..";
    position: relative;
    bottom: 750px;
    left: -7px;
    font-size: 200px;
    color: magenta;
    z-index: calc(3);
}

.pignose:hover::after{
    content: "..";
    position: relative;
    bottom: 750px;
    left: -7px;
    font-size: 200px;
    color: rgb(115, 17, 56);
    z-index: calc(3);
}

.pigeye1::after{
    content: ".";
    position: relative;
    bottom: 760px;
    left: 2px;
    font-size: 200px;
    color: rgb(0, 0, 0);
    z-index: calc(3);
}

.pigeye2::after{
    content: ".";
    position: relative;
    bottom: 760px;
    left: -4px;
    font-size: 200px;
    color: rgb(0, 0, 0);
    z-index: calc(3);
}

.pighead::after{
    content: "BABI";
    position: relative;
    bottom: -325px;
    left: -30px;
    font-size: 170px;
    color: rgb(5, 4, 5);
    z-index: calc(5);
    font-family: monospace;
}
.pigeye1:hover::after {
    color: purple;
}
.pigeye2:hover::after {
    color: purple;
}
.pigeye2:hover::after {
    color: purple;
}
.pighead:hover::after {
    color: linear-gradient(to right, #8d00f2, hsl(285, 93%, 35%));
}