/* Main menu */

@keyframes fadeInAnimationMenu {
    0% {
        opacity: 0;
        z-index: 0;
    }
    30% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 1;
        z-index: 1;
    }
}
.mainText {
    z-index: 3;
    animation: fadeInAnimationMenu ease 2.25s 1 ;
}

.mainText > #name {
    font-weight: 120;
    transform: rotate(-0.575deg);
}

#menu {
    display: flex;
    justify-content: center;
    z-index: 4;
    gap: 2rem; /* Espaciado horizontal por defecto */
}

.item {
    font-weight: 135;
    font-size: 1.65em;
    margin-top: 28.5vh;
}

.item > a:hover, #name > a:hover {
    color: #cda45e;
    animation-fill-mode: ease 4s;
}

.push {
    padding-right: 100px;
}

/* Ajuste responsivo */
@media (min-width: 1921px){
    .mainText #name {
        font-size: 10em;
        text-shadow: 0.075vw 1vw 1vw black;
    }

    .item {
        font-size: 4em;
        text-shadow: 0.075vw 1vw 1vw black; 
    }

    .loadingText #name {
        font-size: 10em;
    }
    .loadingText #position {
        font-size: 4em;
    }
}
@media (max-width: 1920px) {
    .mainText #name {
        font-size: 5em;
        margin-bottom: 10vh;
        text-shadow: 0.075vw 1vw 1vw black;
    }
    
    #menu {
        display: flex;
        flex-direction: row;
        align-items: center; 
        gap: 2em;
        height: 25vh;
    }

    .item {
        font-size: 2em;
        text-shadow: 0.075vw 1vw 1vw black; 
    }

    .item > a {
        text-align: center;
    }
}

@media (max-width: 1200px) {
    .item {
        font-size: 2.5em; 
    }

    .item > a {
        text-align: center;
    }
}

@media (max-width: 780px) {
    .mainText #name {
        font-size: 5em;
        margin-bottom: 5vh;
    }

    #menu {
        flex-direction: column;
        height: 32vh;
    }

    .item {
        font-size: 3.5em;
        margin-top: 0;     
        font-weight: 500;
    }

    .item > a {
        text-align: center;
    }

    .loadingText #name {
        font-size: 4em;
    }
    .loadingText #position {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .mainText #name {
        font-size: 3.7em;
    }

    .loadingText #name {
        font-size: 2.8em;
    }
    .loadingText #position {
        font-size: 1.4em;
    }
    #menu {
        height: 28vh;
    }
}


@media (max-width: 425px) {
    .mainText #name {
        font-size: 3.3em;
    }

    .item {
        font-size: 2.25em;
        font-weight: 400;
    }

    .loadingText #name {
        font-size: 3em;
    }
    .loadingText #position {
        font-size: 1.5em;
    }
}

@media (max-width: 375px) {
    .mainText #name {
        font-size: 3em;
    }

    .loadingText #name {
        font-size: 2.7em;
    }
    .loadingText #position {
        font-size: 1.5em;
    }
}

@media (max-width: 320px) {
    .mainText #name {
        font-size: 2.5em;
    }

    .item {
        font-size: 2.5em;
    }

    .loadingText #name {
        font-size: 2.25em;
    }
}