/* Info */
@keyframes pulse {
    0%{
        opacity: 1;
    }
    100%{
        opacity: .6;
    }
}

@keyframes moveOutStart {
    0%{transform: translateX(0%);}
    80%{transform: translateX(-155%);}
}

@keyframes moveInStart {
    0%{transform: translateX(20%);} 
    70%{transform: translateX(0%);}
}

@keyframes moveOutClicked {
    0%{transform: translateX(0%);}
    100%{transform: translateX(-230%);}
}

@keyframes moveInNext {
    0%{transform: translateX(30%);} 
    70%{transform: translateX(0%);}
}


body{
    overflow: hidden;
}

main{
    background-color: #2d2d30;
    height: 100vh; /* Asegura que ocupe toda la pantalla del dispositivo */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    align-items: center; /* Centra horizontalmente */
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina paddings */
}

#photo {
    display: none; /* Ya está oculto para pantallas pequeñas */
}

#start, #working, #student, #me{
    display: flex;
    place-items: center;
    place-self: center;
}

#text-container {
    display: flex;
    flex-direction: column;
}

#start #title {
    font-size: 4em;
    color: #fff;
    margin-bottom: 10px; 
}

#start #arrow{
    display: flex;
    place-self: center;
}

#start > #photo {
    border-radius: 80vw;
    mask-image: linear-gradient(black 95%, transparent);
}

#arrow{
    font-size: 1.6em;
    animation: pulse ease 0.8s infinite alternate;
    color: #cda45e;
    text-shadow: 0.075vw 0.075vw 0.075vw #000;
}

#arrow:hover{
    cursor: pointer;
}

#title{
    font-size: 4em;
    margin-bottom: 2vh;
    color: #cda45e;
}

#description{
    font-size: 1.4em;
    width: 50vw;
    margin-bottom: 4vh;
}


@media(min-width: 2561px){
    main{
        overflow: hidden; /* Evita desbordamientos */
    }

    #text-container #title{
        font-size: 5em;
    }
    #text-container #arrow{
        font-size: 3em;
    }
    
    nav {
        font-size: 1em;
        display: flex;
        justify-content: space-between;
        font-size: 1.8em;
    }

    #fancier{
        flex: 1
    }
    #description{
        max-width: 1300px;
        overflow-y: scroll;
        scroll-behavior: smooth;
        margin-bottom: 1vh;
    }

    #description::-webkit-scrollbar {
        width: 0;  /* O 1px si quieres hacerla muy delgada */
        height: 0; /* Para el desplazamiento horizontal, si es necesario */
    }

    #description > p {
        margin-bottom: 2vh;
        font-size: .8em;
    }

    #working #description{
        width: 50vw;
        height: 71vh;
        max-width: 1400px;
    }
    #working #description > p {
        font-size: 1.45em;
    }

    #student #description{
        width: 70vw;
        height: 48vh;
    }
    #student #description > p {
        font-size: 1.45em;
    }

    #me #description{
        width: 50vw;
        height: 75vh;
    }
    #me #description > p {
        font-size: 1.6em;
    }

    #arrow{
        font-size: 2.5em;   
    }

    #menu-icon{
        display: none;
    }
    #photo{
        display: block;
    }
}

@media(max-width: 2560px){
    main {
        justify-content: center; /* No afecta a los hijos directamente */
        overflow: hidden; /* Evita desbordamientos */
    }

    main > :not(#start) {
        justify-content: center; /* Centra los elementos */
        align-items: center; /* Centra el contenido verticalmente */
        margin-top: 0vh;
    }

    #text-container #title{
        font-size: 5em;
    }
    #text-container #arrow{
        font-size: 3em;
    }
    
    #description{
        width: 50vw;
        overflow-y: scroll;
        scroll-behavior: smooth;
        margin-bottom: 1vh;
    }

    #description::-webkit-scrollbar {
        width: 0;  /* O 1px si quieres hacerla muy delgada */
        height: 0; /* Para el desplazamiento horizontal, si es necesario */
    }

    #description > p {
        margin-bottom: 2vh;
        font-size: .8em;
    }

    #working #description{
        height: 75vh;
    }
    #working #description > p {
        font-size: 1.3em;
    }

    #student #description{
        height: 42vh;
    }
    #student #description > p {
        font-size: 1.3em;
    }

    #me #description{
        height: 55vh;
    }
    #me #description > p {
        font-size: 1.3em;
    }

    #arrow{
        font-size: 2.5em;   
    }
    
    #fancier{
        flex: 1
    }

    #menu-icon{
        display: none;
    }
    #photo{
        display: block;
    }
}


@media(max-width: 1920px){
    #working #description > p {
        font-size: 1em;
    }

    #student #description{
        height: 48vh;
    }

    #student #description > p {
        font-size: 1em;
    }

    #me #description > p {
        font-size: 1em;
    }

    #text-container > #title{
        font-size: 3.8em;
    }
    #arrow{
        font-size: 2em;
    }

}

@media (max-width: 1200px) {
    main {
        justify-content: unset; /* No afecta a los hijos directamente */
    }

    main > #start {
        flex: 1 0 100%; /* Asegura que ocupe toda la línea */
        display: flex; /* Asegura que sea un contenedor flexible */
        justify-content: center;
        align-items: center;
    }

    main > :not(#start) {
        flex: 1 0 100%; /* Hacer que los otros elementos ocupen todo el ancho */
        justify-content: flex-start;
        align-items: flex-start;
        display: flex; /* Asegura que sean contenedores flexibles */
        margin-top: 2vh;
    }

    #text-container > #title{
        margin-top: 2vh;
        font-size: 2.4em;
    }

    #text-container > #arrow{
        font-size: 1.8em;
    }

    #description{
        width: 90vw;
    }

    main{
        overflow: auto;
    }
    #working #description, #student #description, #me #description{
        height: auto;
        max-height: 75vh;
    }

    #working #description > p {
        font-size: 1em;
    }

    #arrow{
        font-size: 1.8em;
    }

    #student #description > p {
        font-size: 1.2em;
    }

    #me #description > p {
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
    #photo{
        display: none;
    }

    #description{
        margin-bottom: 0vh;
    }
    
    #working #description > p {
        font-size: 1em;
    }

    #student #description > p{
        font-size: 1.2em;
    }

    #me #description > p {
        font-size: 1em;
    }

    #text-container > #title{
        font-size: 3em;
    }
    
    #text-container > #arrow{
        font-size: 2em;
    }

    nav {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #menu-icon {
        display: block;
        font-size: 30px;
        cursor: pointer;
    }

    nav > .item {
        display: none;
        padding: 15px;
        text-align: center;
    }

    .item.activeHamburger {
        display: block; 
    }

    #fancier{
        display: flex;
        justify-content: space-between;
        width: 90vw;
    }

    #fancier #name{
        place-self: center;
    }

    #fancier, .item{
        font-size: 1.3em;
    }
} 

@media (max-width: 480px) {
    #working #title, #student #title, #me #title{
        font-size: 1.8em;
    }

    #working #description > p {
        font-size: .9em;
    }

    #student #description > p {
        font-size: 1em;
    }

    #me #description > p {
        font-size: .9em;
    }

    #arrow{
        font-size: 1.3em;
    }

    #text-container > #title{
        font-size: 1.8em;
    }
    
    #text-container > #arrow{
        font-size: 1.4em;
    }
/* 
    #description {
        height: 80vh;
        width: 90vw;
        margin-bottom: 1vh;
    } */
}


@media (max-width: 425px) {
    #text-container #title {
        font-size: 1.8em;
    }

    #text-container #arrow{
        font-size: 1.3em;
    }

    #working #description > p {
        font-size: .9em;
    }

    #student #description > p {
        font-size: .9em;
    }

    #me #description > p {
        font-size: .9em;
    } 
}

@media (max-width: 375px) {
    #text-container #title {
        font-size: 1.7em;
    }

    #description{
        width: 80vw;
    }
}

@media (max-width: 320px) {
    #text-container #title {
        font-size: 1.5em;
    }

    #working #description > p {
        font-size: .8em;
    }
    
    #student #title{
        font-size: 1.8em;
    }
    #student #description > p {
        font-size: .8em;
    }

    #me #description > p {
        font-size: .8em;
    }
}