#home{
    font-size: 4.8rem;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#home hgroup{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: end;
    text-align: center;

    margin: 5rem auto 0 auto;
}

#home hgroup h2{
    color: var(--text-color-1);
    font-size: 1.2em;
    font-family: var(--orbitron);
    font-weight: 700;
}

#home hgroup #typed-animation-name mark{
    color: var(--name-emphasis);
    background-color: transparent;
    font-weight: bold;
    text-shadow: 0 0 7px var(--name-emphasis);
}

#home hgroup .typed-cursor{
    display: none;
}

#home hgroup #role{
    font-size: 0.75em;
    align-self: flex-end;
    z-index: 3;
    padding: 1rem 0;
    transition: all ease-in-out 2000ms;
    font-family: var(--rajdhani);
    color: var(--role-emphasis);
    text-shadow: 0px 0px 5px var(--role-emphasis);
}

#home hgroup #role span{
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateX(-40rem);
    transition: all ease-in-out 500ms;
}

#home hgroup:hover #role span{
    transform: translateX(-7.5rem);
    opacity: 1;
}

#home .social-networks-container{
    display: flex;
    gap: 3.5rem;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 14rem;
    opacity: 0;

}


#home .social-networks-container a {
    width: 4.2rem;
    height: 4.2rem;
    color: var(--text-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out 800ms;
    transform-origin: bottom;
    padding: 1rem;
    overflow: hidden;
    position: relative;

    &:hover{
        transform: translateY(-5px) rotateY(360deg);
    }
}

#home .social-networks-container a:before{

    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(100px);
    transition: all ease-in-out 1000ms;
    z-index: 3;

    &:hover{
        transform: translateY(0);
    }
}

#home .social-networks-container a:nth-of-type(1){
    &:hover{
        color: #0a66c2;
        filter: drop-shadow(0px 0px 2px #0a66c2);
    }
}

#home .social-networks-container a:nth-of-type(2){
    &:hover{
        color: #6e5494;
        filter: drop-shadow(0px 0px 2px #6e5494);
    }
}

#home .social-networks-container a:nth-of-type(3){
   
    &:hover{
        color: #d44638;
        filter: drop-shadow(0px 0px 2px #d44638);

    }
   
}