/* projects_categories */
main {
    display: block;
    justify-content: center; /* Alinea el contenido a la izquierda */
    align-items: center; /* Centrado vertical */
    position: relative;
}

.category{
    top: 0;
    left: 0;
    position: relative;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    width: auto;
    transition: all 3s ease;
    z-index: 5;
    height: 50vh;
}

.category #name {
    color: #cda45e;
    font-size: 6em;
    font-weight: 100;
}

.category #description {
    font-size: 1.5em;
    font-weight: 200;
}

#university, #hobby{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1vw;
    background-size: cover;
    z-index: 3;
    place-self: center;
    text-align: center;
    align-items: center;
    transition: 2s;
    vertical-align: middle;  
    top: 25vh;
    width: 100%;
    height: 50vh;
}

#goBack, #university, #hobby{
    position: absolute;
} 

#university_section{
    background-image: url("../img/uade.webp"); /* Original image: https://www.uade.edu.ar/media/l2bjw5hp/frente-monserrat-noche.jpg?center=0.64200207002948817,0.49796876344469887&mode=crop&width=1900&height=580&rnd=133483364545500000 */
}

#hobby_section{
    background-image: url("../img/hobby.webp"); /* Original image: https://www.freepik.com/free-photo/top-view-set-gadgets-purple-neon-light-pink_10584199.htm#fromView=search&page=2&position=13&uuid=259017ce-85f1-4a0b-81eb-4c8e8a82fc55 */
}

main #goBack{
    top: 0;
    margin-top: 4vh;
    text-shadow: 0.075vw 1vw 1vw black;
    font-weight: 100;
}

@media (min-width: 1921px) {
    .category {
        cursor: pointer;
        display: flex;
        height: 48.25vh;
        font-size: 1.7em;
    }
    .category #name {
        font-size: 5em;
    }

    .category  #description {
        font-size: 2em;
    }

    nav {
        font-size: 1.7em;
        display: flex;
        justify-content: space-between;
    }

    #fancier{
        flex: 1
    }

    #menu-icon {
        display: none;
    }

    #main > #goBack{
        font-size: 3em;
    }

}

@media (max-width: 1920px) {
    main{
        overflow: hidden; 
    }
    .category {
        cursor: pointer;
        display: flex;
        height: 48.25vh;
        font-size: 1em;
    }
    .category #name {
        font-size: 5em;
        color:#cda45e;
    }

    .category  #description {
        font-size: 2em;
    }

    nav {
        font-size: 1em;
        display: flex;
        justify-content: space-between;
    }

    #fancier{
        flex: 1
    }

    #menu-icon {
        display: none;
    }

}

@media (max-width: 1200px) {
    .category {
        height: 47.55vh;
        font-size: 1em;
    }

    .category:hover{ 
        font-size: 1em
    }

    .category::-webkit-scrollbar {
        width: 0;  /* O 1px si quieres hacerla muy delgada */
        height: 0; /* Para el desplazamiento horizontal, si es necesario */
    } 
    nav{
        font-size: 1.35em;
    }

} 

@media (max-width: 768px) {
    main #goBack{
        font-weight: 200;
        font-size: 1.3em;
    }

    .category{
        font-size: .9em;
        height: 46.5vh;
    }
    .category:hover{ 
        font-size: .9em
    }

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

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

    .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) {
    .category{ 
        font-size: .8em;
        height: 47vh;
    }
    .category:hover{ 
        font-size: .8em
    }

    main #goBack{
        font-weight: 400;
    }
} 

@media (max-width: 375px) {
    .category{ 
        font-size: .7em
    }
    .category:hover{ 
        font-size: .7em
    }

    .category #description{
        font-size: 2.1em;
    }
} 

@media (max-width: 320px) {
    .category{ 
        font-size: .65em
    }
    .category:hover{ 
        font-size: .65em
    }

    .category #description{
        font-size: 2em;
    }
}