@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box ;
}

body{
    font-family: 'Montserrat', sans-serif;
}

.wrapper {
    width: 100vw;
    height: 100%;
    background-color: #0f1749;
    color: #fff;
    
}

.navbar{
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: rgb(28, 28, 74);
   
}

.brand{
    font-size: 50px;
    
}

#logo{
    color: aqua;
}
.brand span{
    color: aqua;
}

.menu li{
    list-style: none;
    padding: 20px 0;
}
.menu a{
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    
   
}

.menu{
    display: flex;
    width: 50%;
    justify-content: space-around;
}

.menu a:hover{
    color: aqua;
    transition: ease-in 0.5s;
}
.todo-menu, .info-content-sub, .contacto-social {
    display: none;
}





.main{
    margin: 0 auto;
    width: 80vw;
    height: 100%;
    min-height: 100vh; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
     
   /* background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.5),  rgba(0,0,0,0.5)),
    url(img/istockphoto-1419766496-612x612.jpg); 
    background-repeat: none; 
    background-size: cover;
    background-position: center center;*/
    
 
   
    
}
h1{
    font-size: clamp(4vw,1.5em,3em);
}
span{
    color: aqua;
}

.info-content{
    
    width: 70%;
    height: auto; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
   
}

.info-content button{
    padding: 10px 20px;
    background-color: aqua;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 1px 3px 11px 5px rgba(102,231, 200,.10 );
}

.info-content button:hover{
    background-color: white;
    box-shadow: none;
}

 .img-me{
    border-radius: 50px;
    border: 7px solid aqua;
    width: 500px;
    height: 520px;
}

.sobre-mi{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    gap: 20px;
    padding: 2em;
}

.iconos{
    display: flex;
    flex-wrap: wrap; /* Esto permite que los iconos se ajusten automáticamente */
    justify-content: center; /* Opcional, para centrar los iconos */
    gap: 10px; /* Espacio entre los iconos */
    margin-top: 2em; /* Ajusta según sea necesario */
}

 #c:hover{
    color: blueviolet  !important;
}
#html:hover{
    color: orangered  !important;
}
#css:hover{
    color: blue  !important;
}

#js:hover{
    color: rgb(224, 224, 115)  !important;
}

#NodeJs:hover{
    color: green  !important;
}
#git:hover{
    color: orangered  !important;
}

#git-hub:hover{
    color:grey  !important;
}

#docker:hover{
    color: blue  !important;
}
#python:hover{
    color: blue  !important;
}

.sobre-info .iconos i{
    font-size: 50px;
    transition: transform 0.3s ease;
}

.img-sobre-mi{
    width: 40%;
   
}

.sobre-info{
    width: 50%;
    padding: 3em;
}
.sobre-info h1{
    
    color: rgb(28, 28, 74);
}

.divaider{
    height: 4px;
    width: 60px;
    background-color: aqua;
    margin-top: 5px;
    margin-bottom: 2em;
    
}


.iconos{

    margin-top: 50px; 
    display: flex; 
    gap: 15px; 
    
    
}

.iconos i{
    cursor: pointer;
    margin-top: 20px; 
    display: inline-block;
}

.portafolio{
    width: 100vw;
    background-color: #0f1749;
    color: white;
}

.portafolio-headings{
    width: 100vw;
    
    padding: 5em;
}

.portafolio-headings, h2{
    font-size: 1.5em;
}

.portafolio, .container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;                   
    padding: 20px;
   
}


.card{
    
    width: 400px;
    height: 370px;
    background-color: #19215f;
    margin: 1em;
   
    
}
.card:hover {
    transform: translateY(-10px); /* Añade el efecto al pasar el cursor */
}



.card-title{
    padding: 20px;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1em;
   
}

.portafolio, a{
    color: white;
    text-decoration: none;
   
} 

.link, i{

    display: flex;
    justify-content: space-evenly;
    font-size: 1.5em;
    
}

.link, i:hover{
    color:aqua ;
    transition: ease-in 0.5s;
}

.card-img001{
    width: 100%;
    height: 200px;
    background-image: url(img/generador.png);
    background-size: cover;
}
.card-img00{
    width: 100%;
    height: 200px;
    background-image: url(img/appClima.png);
    background-size: cover
  
}

.card-img01{
    width: 100%;
    height: 200px;
    background-image: url(img/AppWindForms.png);
    background-size: cover;
}
.card-img02{
    width: 100%;
    height: 200px;
    background-image: url(img/2025-03-30\ \(2\).png);
    background-size: cover;
}


.card-img04{
    width: 100%;
    height: 200px;
    background-image: url(img/listaDeTreas.png);
    background-size: cover;
}



footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 200px;
    padding: 2em;
    background-color: aqua;

}

.footer-content h2{
    font-size: 3em;

}
.footer-content h5{
    font-size: 1.5em;

}

.contactos {
    display: flex;
    justify-content: space-evenly ;
    
    
}

.coontatos, i{
    color: black;
}

.contactos, #gmail, #linkedin, #git-hub-footer:hover{
    color: black;
}

@media screen and (max-width: 900px){
    .main{
        display: flex;
        flex-direction: column-reverse;

    }
    .sobre-info {
        flex-grow: 1;  
        width: 100%;
    }
    .img-sobre-mi {
        margin-top: 20px;  
        width: 100%;
    }
.info-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}



.info-content .contacto-social, i{
    color: aliceblue;
    display: flex;
    justify-content: space-evenly;
    padding: 25px;
    font-size: 1.5em;
    
}
.descargar-cv, .a-s,.d-s{
    display: none;
}
.info-content-sub{
    margin-bottom: .5em;
}

.img-me{
    margin-top: 10em;
    margin-bottom: 5em;

}
    .menu{
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        background-color: #2b3058;  
        z-index: 1;
        transform: translate(-110%);
        transition: all .5s ease-in-out ;  
    }
    .show-menu{
        transform: translate(0%);

        transition: all .5s ease-in-out ;
    }
    .menu li{
        margin: 2em;

    }
    .todo-menu{
        display: block;
    }
    .todo-menu i{
        cursor: pointer;

    }
    .todo-menu i:hover{
        color: aqua;
        transition: ease-in 0.5s;

    }

    .fa-bars{
        font-size: 1.5em;
        margin-top: -.2em;
    }
    
     .fa-close{
        font-size: 1.7em;
        display: none;
    }

    main .img-me{
        width: min(70%, 350px);
        height: auto;
    }
  
    .contacto-social,.info-content-sub {
        display: block;
        
    }

    .sobre-mi{
        display: flex;
        flex-direction: column-reverse;
        

    }

    .img-sobre-mi{
        display: none;
    }
    .iconos i {
        font-size: 40px;
        color: black; 
        
    }
    .contactos i{
        font-size: 3em;
        color: black;
       }

      
    
}
@media (max-width: 480px) {
    .iconos i {
        font-size: 30px; 
        color: black;

    }
   footer h2, h5 {
    display: none;
   }

   
  
   .card-img001, .card-img00, .card-img01, .card-img02, .card-img03, .card-img04, .card-img05, .card-img06 {
    background-size: contain; 
    background-position: center; 
    height: 150px; 
    background-repeat: no-repeat;
}
.card {
    width: 100%; 
    height: auto; 
}


   

}