/*   Head4er Animation   */ 

@keyframes glow{
    0% { 
   border-color: rgb(27, 234, 12);
    }
    25%{ border:black;
    }
    50% { 
        border-color: rgb(0, 101, 190);
        border-width: 10px;
    }
    75%{ border:black}
    100%  {    border-color: rgb(27, 234, 12);
    }
}

@keyframes glowText{
    0% { 
   color: rgb(241, 180, 95);
    }

    50% { 
        color: rgb(0, 250, 217);
        border-width: 10px;
    }

    65% {  
        color: rgb(111, 236, 95);
      }
    100%  {    
        color: rgb(198, 134, 250);
    }
}



#headerButton { 
    animation: glow ;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: relative; 
    
    z-index: 4;
}
.nav-link { 
    animation: glowText ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}






/* Two Animated Images   */


.topIcons { 
    display: flex;
    justify-content: space-between;

}
.topIcons > img { 
        animation-name: rotateAndSlide;
    animation-duration: 5s;
    animation-iteration-count: infinite;
        border-radius: 50%;
z-index: -3;
}


/* 
.firstImage { 
    animation-name: rotateAndSlide;
    animation-duration: 5s;
    animation-iteration-count: infinite;


    border-radius: 50%;

position: fixed;
top: 200px; 
left: -1rem;
opacity:1;

z-index: -3;
    }
    
    
    
    .secondImage { 
        animation-name: rotateAndSlide;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;


    border-radius: 50%;

    position: fixed;
top: 200px;
right: -1rem;

    } */
    
    
    @keyframes rotateAndSlide {
        
        0% { 
            transform: rotateZ(0deg);
        } 
        50% { 
            transform: rotateZ(360Deg);
        }
        100% { 
            transform: rotateZ(0deg);
        }
    
    }





    .opacity-0 {
        opacity: 0;
    }