body{
    background-color:rgba(0, 0, 0, 0.926);
}

body::after{
    content:" ";
    display: block;

    position:absolute;
    font-size:0.65em;

    top:295px;
    left:-30px;

    padding: 10px;

    background-color: white;
    outline: 2px solid pink;
}

.parentsbox{
    background-color:whitesmoke;
    outline-style:solid;
    height:500px;
    width:500px;

    top:100px;
    left:100px;

    border-radius:30px;

    position:relative;

    z-index: -2;
}

.parentsbox:hover{
    animation: bgChange 2s;
    background-color:rgb(39, 39, 39);
    outline: 5px solid rgb(232, 16, 16);
}

.pighead{
    position:absolute;
    height:315px;
    width:300px;
    
    top: 100px;
    left: 125px;

    border-top-right-radius:75px;
    border-top-left-radius:75px;

    background-color:saddlebrown;

    border: 5px solid black;

    z-index: 0;
}

.pigear{
    height: 70px;
    width: 75px;

    border-top-right-radius: 20px;
    border-top-left-radius: 20px;

    background-color:rgb(128, 62, 14);

    border-top: 4px black solid;
    border-left: 4px black solid;
    border-right: 4px black solid;
}

.ear1{
    position:absolute;

    top:53px;
    left:140px;
    transform:rotate(340deg);
}

.ear2{
    position:absolute;

    top:55px;
    left:350px;
    transform:rotate(20deg);

    z-index: -1;
}

.pigeye{
    height:50px;
    width:100px;

    background-color:saddlebrown;

    border-bottom: 5px black solid;
    border-left: 5px black solid;
    border-right: 5px black solid;

    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.eye1{
    position:absolute;

    left:125px;
    top:420px;
}

.eye1 p{
    top:-365px;
    left:28px; 

    transform:rotate(340deg);
}

.eye2{
    position:absolute;

    left:325px;
    top:420px;
}

.eye2 p{
    position:absolute;

    top:-365px;
    left:35px;  

    transform:rotate(20deg);

    z-index: -1;
}

.eye1 p, .eye2 p{
    position:absolute;

    background-color:pink;
    color:pink;

    height:50px;
    width:50px;

    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.pignose{
    position: absolute;

    height:225px;
    width:200px;

    top:150px;
    left:45px;

    outline: 5px black solid;

    background-color:rgb(83, 39, 7);

    border-bottom-left-radius: 20px;

    border-top-left-radius: 20px;

    z-index: -1;
}

.pignose::before{
    content:"Gerald Gavin Lienardi";
    display:block;

    position:absolute;
    font-size:0.65em;

    top:295px;
    left:-30px;

    padding: 10px;

    background-color: white;
    outline: 2px solid black;

    border-radius: 10px;
}

.pignose p{
    position:absolute;

    height:25px;
    width:200px;

    top:-150px;
    left:115px;

    border: 10px yellow solid;

    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%; 
    border-bottom-right-radius: 50%;

    background-color:transparent;
    color:transparent;
    animation: haloBobbing 2.5s infinite;
}

@keyframes haloBobbing{
    0% {transform: translateY(-8px);}
    50% {transform: translateY(20px);}
    100% {transform: translateY(-8px);}
}

.pigsmile {
    position:absolute;

    height:100px;
    width:200px;

    left:275px;
    top:170px;

    outline: 5px solid black;

    border-radius:100px;

    background-color:aqua;

    z-index: 4;
}

.parentsbox:hover .pigsmile::before{
    content:"";
    display:block;

    position:absolute;

    top:-20px;
    left:30px;

    height:15px;
    width:50px;

    animation:raiseEyebrow1 2s;
    border-top: 5px solid black;

    background-color:transparent;
    
    z-index:3;

}

.parentsbox:hover .pigsmile::after{
    content:"";
    display:block;

    position:absolute;

    top:-35px;
    left:120px;

    height:15px;
    width:50px;

    border-top: 5px solid black;
    border-left: 5px solid black;
    border-right: 5px solid black;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;

    animation:raiseEyebrow2 2s;
    background-color:transparent;
    
    z-index:3;
}

.pighead::before{
    content:"SUS";
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 5em;

    position:absolute;
    top:180px;
    left:120px;

    color:transparent;
}

.parentsbox:hover .pighead::before{
    animation:textAppear 5s infinite;
}

.parentsbox:hover .pigeye{
    animation: becomeSUS 2s;
    background-color:darkred;
}

.parentsbox:hover .pighead{
    animation: becomeSUS 2s;
    background-color:darkred;
}

.parentsbox:hover .pigsmile{
    animation:lookAt 5s infinite;
}

.parentsbox:hover .pignose{
    animation: becomeSUS 2s;
    background-color:darkred;
}

.parentsbox:hover .pigear{
    animation: becomeSUS 2s;
    background-color:rgb(127, 1, 1);
}



@keyframes textAppear{
    0%{color:transparent}
    30%{color:transparent}
    40%{color:white}
    75%{color:transparent}
    100%{color:transparent}
}

@keyframes becomeSUS{
    0% {background-color:saddlebrown}
    100% {background-color:darkred}
}

@keyframes bgChange{
    0% {background-color:white; outline: 5px solid transparent;}
    100% {background-color:rgb(39, 39, 39); outline: 5px solid red;}
}

@keyframes raiseEyebrow1{
    0% {transform:translateY(75px);border-top: 5px solid transparent;}
    30%{border-top: 5px solid transparent;}

    100% {transform:translateY(0px);border-top: 5px solid black;}
}

@keyframes raiseEyebrow2{
    0% {
        transform:translateY(75px);
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;}
    30%{border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;}    
    100% {
        transform:translateY(0px);
        border-top: 5px solid black;
        border-left: 5px solid black;
        border-right: 5px solid black;}
}

@keyframes lookAt{
    0% {opacity: 1; transform:translateX(0);}
    25% {transform:translateX(-50px);}
    50% {transform:translateX(-50px);}
    100% {transform:translateX(0);}
}

@keyframes sideeye{
    
}