img#software-developer{
    position: absolute;
    top: 35vh;     
    left: 68vw; 
    width: 400px;
    height: 400px;    
    background-repeat: no-repeat;
    background-position: center;    
    background-size: cover;
    object-fit: cover;
    z-index: 3;
    animation: bouncing 2s ease-in-out infinite;
    border-radius: 50%;    
}

#circle-below{
    position: absolute;
    top: 77vh;     
    left: 68vw;
    height: 90px;
    width: 400px;
    border-radius: 50%;
    background: linear-gradient(90deg, #410445, #A5158C);
    z-index: 2;    
    transition: .5s ease-in-out;
}

img#software-developer:hover + #circle-below{
    box-shadow: 0 0 5px #410445, 0 0 25px #A5158C, 0 0 50px #410445, 0 0 100px #A5158C;
}


img#farmer{
    position: absolute;
    top: 57vh;     
    left: 4.5vw; 
    width: 250px;
    height: 250px;    
    background-repeat: no-repeat;
    background-position: center;    
    background-size: cover;
    object-fit: cover;    
    border-radius: 50%;    
    z-index: 1;               
    animation: bouncing-one 2s .5s ease-in-out infinite;    
}

#circle-below-one{
    position: absolute;
    top: 88vh;     
    left: 3vw;
    height: 60px;
    width: 300px;
    border-radius: 50%;
    background: linear-gradient(180deg, #410445, #A5158C);
    z-index: 0;        
    transition: .5s ease-in-out;    
}

img#farmer:hover ~ #circle-below-one{
    box-shadow: 0 0 5px #410445, 0 0 25px #A5158C, 0px 0px 50px #410445, 0 0 100px #A5158C;
}


img#pool{
    position: absolute;
    top: 13.5vh;     
    left: 4.5vw; 
    width: 250px;
    height: 250px;    
    background-repeat: no-repeat;
    background-position: center;    
    background-size: cover;
    object-fit: cover;    
    border-radius: 50%;  
    z-index: 1;          
    animation: bouncing-one-one 2s 1s ease-in-out infinite;
}

#circle-below-three{
    position: absolute;
    top: 46vh;     
    left: 3vw;
    height: 60px;
    width: 300px;
    border-radius: 50%;
    background: linear-gradient(180deg, #410445, #A5158C);
    z-index: 0;        
    transition: .5s ease-in-out;
}

img#pool:hover ~ #circle-below-three{
    box-shadow: 0 0 5px #410445, 0 0 25px #A5158C, 0px 0px 50px #410445, 0 0 100px #A5158C;
}


img#me{
    position: absolute;
    top: 24vh;
    left: 33vw;
    width: 25vw;
    height: 50vh;   
    border-radius: 100%; 
    background-repeat: no-repeat;
    background-position: center;    
    background-size: contain;
    object-fit: cover;
    padding: 10px;
    /* border: 2px solid red;    */
    z-index: 2;
    animation: bouncing-two 2s 1.5s ease-in-out infinite;
}

#circle-below-two{
    position: absolute;
    top: 70vh;     
    left: 33.5vw;
    height: 60px;
    width: 350px;
    border-radius: 50%;
    background: linear-gradient(180deg, #410445, #A5158C);
    z-index: 1;        
    transition: .5s ease-in-out;
}
img#me:hover + #circle-below-two{
    box-shadow: 0 0 5px #410445, 0 0 25px #A5158C, 0 0 50px #410445, 0 0 100px #A5158C;
}







@keyframes bouncing{
    0%{
        top: 35vh;
    }
    50%{
        top: 34vh;
    }
    100%{
        top: 35vh;
    }
}

@keyframes bouncing-one{
    0%{
        top: 57vh;
    }
    50%{
        top: 56vh;
    }
    100%{
        top: 57vh;
    }
}


@keyframes bouncing-one-one{
    0%{
        top: 13.5vh;
    }
    50%{
        top: 12vh;
    }
    100%{
        top: 13.5vh;
    }
}


@keyframes bouncing-two{
    0%{
        top: 24vh;
    }
    50%{
        top: 23vh;
    }
    100%{
        top: 24vh;
    }
}

