.background-animated-elements-container {
    width: 100%;
    height: 165vh;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.background-animated-elements {
    position: relative;
    z-index: 1;
    pointer-events: none;
    top: -6vh;
}

/* Pulse circles */
@keyframes intro-blue-circle-animation {
    0% { transform: scale(1) translate(0) translateY(0); }
    25% { transform: scale(1.2) translate(5%) translateY(20%); }
    50% { transform: scale(1) translate(20%) translateY(10%); }
    75% { transform: scale(1.1) translate(-10%) translateY(0%); }
    100% { transform: scale(1) translate(0) translateY(0); }
}

.cyber-blue-circle-intro {
    width: 59%;
    height: auto;
    object-fit: cover;
    position: absolute;
    /* top: -210px;
    left: -30%; */
    top: 100px; 
    left: -20%;
    filter: blur(2rem);
    opacity: .5;
    cursor: default;
    background-color: transparent;
    animation: intro-blue-circle-animation 20s linear infinite both;
}

.cyber-second-blue-circle-intro {
    width: 59%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 10px;
    right: -35%;
    filter: blur(2rem);
    opacity: .5;
    cursor: default;
    background-color: transparent;
    animation: intro-pink-circle-animation 20s linear infinite both;
}

@keyframes intro-pink-circle-animation {
    0% { transform: scale(1) translate(0) translateY(0); }
    25% { transform: scale(1.3) translate(-10%) translateY(-5%); }
    50% { transform: scale(1) translate(-5%) translateY(10%); }
    75% { transform: scale(1.1) translate(-10%) translateY(0%); }
    100% { transform: scale(1) translate(0) translateY(0); }
}

.cyber-pink-circle-intro {
    width: 59%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 250px;
    right: -35%;
    filter: blur(2rem);
    opacity: .5;
    cursor: default;
    background-color: transparent;
    animation: intro-pink-circle-animation 20s linear infinite both;
}

.cyber-second-pink-circle-intro {
    width: 59%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: -210px;
    left: -30%;
    filter: blur(2rem);
    opacity: .5;
    cursor: default;
    background-color: transparent;
    animation: intro-blue-circle-animation 20s linear infinite both;
}

/* Neons going down */
@keyframes AnimatedHero-shrink {
    10% {
        opacity: 0;
        display: none;
    }
    35% {
        opacity: 0.996754;
        display: initial;
    }
    60%, 100% {
        opacity: 0;
        display: none;
    }
}

@keyframes AnimatedHero-shift {
    0% {
        transform: translateY(-620px);
    }
    80%, 100% {
        transform: translateY(800px);
    }
}

.background-pink-neon-left {
    position: absolute;
    width: 5px;
    height: 200px;
    opacity: 0;
    filter: drop-shadow(#fdaefc 0px 0px 6px);
    top: 140px;
    left: 4%;
    background: var(--cyber-pink);
    border-radius: 8px;
    animation: 7s infinite normal AnimatedHero-shrink, 
    7s infinite normal AnimatedHero-shift;
    cursor: default;
}

.background-blue-neon-left {
    position: absolute;
    width: 5px;
    height: 400px;
    opacity: 0;
    filter: drop-shadow(#99e8f8 0px 0px 6px);
    top: -150px;
    left: 5%;
    background: var(--cyber-blue);
    border-radius: 8px;
    animation: 7s infinite normal AnimatedHero-shrink, 
    7s infinite normal AnimatedHero-shift;
    cursor: default;
}

.background-pink-neon-right {
    position: absolute;
    width: 5px;
    height: 306px;
    opacity: 0;
    filter: drop-shadow(#fdaefc 0px 0px 6px);
    top: 300px;
    left: 96%;
    background: var(--cyber-pink);
    border-radius: 8px;
    animation: 7s infinite normal AnimatedHero-shrink, 
    7s infinite normal AnimatedHero-shift;
    cursor: default;
}

.background-blue-neon-right-first {
    position: absolute;
    width: 5px;
    height: 133px;
    opacity: 0;
    filter: drop-shadow(#99e8f8 0px 0px 6px);
    top: 250px;
    left: 95%;
    background: var(--cyber-blue);
    border-radius: 8px;
    animation: 7s infinite normal AnimatedHero-shrink, 
    7s infinite normal AnimatedHero-shift;
    cursor: default;
}

.background-blue-neon-right-second {
    position: absolute;
    width: 5px;
    height: 150px;
    opacity: 0;
    filter: drop-shadow(#99e8f8 0px 0px 6px);
    top: 550px;
    left: 97%;
    background: var(--cyber-blue);
    border-radius: 8px;
    animation: 7s infinite normal AnimatedHero-shrink, 
    7s infinite normal AnimatedHero-shift;
    cursor: default;
    
}

/* Soft skills neons title */
.softSkillsNeonLeft, .softSkillsNeonRight {
    width: 100%;
    height: 3px;
    border-radius: 25px;
    background: linear-gradient(var(--cyber-blue) 0 0),
        linear-gradient(var(--cyber-blue) 0 0),
        transparent;
    background-size: 60% 100%;
    background-repeat: no-repeat;
}

.softSkillsNeonLeft {
    animation: softSkillsNeonLeft 5s infinite;
}
 
@keyframes softSkillsNeonLeft {
    0% {
       background-position: 250% 0, 250% 0;
    }
 
    66% {
       background-position: 250% 0,-150% 0;
    }
 
    100% {
       background-position: -150% 0,-150% 0;
    }
}
 
.softSkillsNeonRight {
    animation: softSkillsNeonRight 5s infinite;
}
 
@keyframes softSkillsNeonRight {
    0% {
       background-position: -150% 0,-150% 0;
    }
 
    66% {
       background-position: 250% 0,-150% 0;
    }
 
    100% {
       background-position: 250% 0, 250% 0;
    }
}

@keyframes gradientButton {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

#typewriter {
    background: -webkit-linear-gradient(45deg, var(--cyber-blue), var(--cyber-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#typewriter-cursor {
    color: var(--cyber-blue);
    animation: blink 1s linear infinite;
}
@keyframes blink {
    0% {
      opacity: 100%;
    }
    50% {
      opacity: 0%;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    /* .cyber-blue-circle-intro {
        width: 30em;
        height: 30em;
        left: -200px;
    }

    .cyber-pink-circle-intro {
        width: 30em;
        height: 30em;
        top: 350px;
        right: -200px;
    } */

    .cyber-blue-circle-intro {
        animation: unset;
        width: 50em;
        height: 50em;
        top: 285px;
        right: -378px;
        opacity: .3;
    }
    
    .cyber-pink-circle-intro {
        animation: unset;
        width: 50em;
        height: 50em;
        left: -305px;
        top: -30px;
        opacity: .3;
    }
    .cyber-second-blue-circle-intro, .cyber-second-pink-circle-intro {
        display: none;
    }
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
    
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { 


}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {



}