/* WHITE BACKGROUND */
#hero-name{
    background-color: var(--base-bright-white);


    width: 100%;
    margin-top: 5rem;
    padding: 0 2.5vw 2vw;
}


/* LEKISH HERO TEXT */
#hero-name h1{
    font-family: "BBH Hegarty", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    font-size: 21vw;
    line-height: 1.1;

    color: var(--bg-color);
    -webkit-text-stroke: clamp(1px, 0.25vw, 5px) #000000;

    text-shadow: var(--base-pink) 0.65vw 0.6vw;

    letter-spacing: 0.025em;
    margin: 0;
    padding: 0;

}

#hero-name p{
    color: var(--base-pink);
    font-family: "Pixelify Sans", sans-serif;
    font-size: clamp(0.65rem, 1.5vw, 3rem);
    line-height: 1.2;
    margin: -1vw 0 0 10vw;
    max-width: 90%;
    width: fit-content;
}


/* INTERACTIONS BELOW */

#hero-name h1:hover{
    text-shadow: var(--bg-color) 0.65vw 0.6vw;
    -webkit-text-stroke: clamp(1px, 0.25vw, 5px) transparent;
    /* color: var(--base-pink); */

    animation-name: hero_animation;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes hero_animation{
    0%{
        color: var(--base-pink);
    }

    20%{
        color: var(--base-orange);
    }

    40%{
        color: var(--base-blue); 
    }

    60%{
        color: var(--base-red);
    }

    100%{
        color: var(--base-pink);
    }
}