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

body{
    color: white;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #0d1b2a);
    
}
header{
    height: 100px;    
    display: flex;
    justify-content: space-between;    
    padding: 5px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(253, 253, 253, 0.3);
    
}

.container_info_superior{
    
    width: 70%;       
    gap: 5px;
    display: flex;    
    flex-direction: column;    
}

h1{
    font-size: 1.5rem;    
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.container_info_superior p{
    width: 100%;
    flex-direction: column;    
    font-size: 0.9rem;
    font-style: italic;
    
}

header a{
    padding: 10px;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
header a img{
    width: 30px;
    height: auto;
}

main{           
    display: flex;    
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;    
    padding: 10px;
    gap: 10px;
}

.training{    
    display: flex;
    width: 100%;
    flex-direction: column;    
    align-items: center;   
    justify-content: space-around;    
    gap: 10px;
    padding: 10px;
    overflow: hidden;

}
section{    
    
    width: 100%;    
    padding: 20px;
    gap: 20px;
    border:  solid 1px #1eada6;
    border-radius: 20px;
    box-shadow: 0 0 20px 5px rgba(74, 164, 224, 0.5);
}


.training h2{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;    
}

.logo, .subtitulo{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.logo{
    grid-area: logo;     
}
.logo img{
    border-radius: 50%;
    max-width: 80%;
    max-height: 80%;
    object-fit: cover;
}
.subtitulo{
    grid-area: subtitulo;
    justify-content: flex-start;
    font-size: 1.0rem;
    padding: 0 10px;
}

.descripcion{
    grid-area: descripcion;
    padding: 10px;
    font-size: 1rem;
    overflow: auto;
}
/*
.logo, .subtitulo, .descripcion{
    border: solid 1px #000; 
}
*/

.skills{        
    display: flex;
    flex-direction: column;        
    gap: 10px;
    padding: 5px;
    width: 100%;
}

#Hard, #Soft{    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 5px;
    width: 100%;    
}


.container_skill{        
    display: grid;
    height: 30vh;    
    width: 100%;
    border: solid 2px #f5f5f5;
    border-radius: 20px;
    box-shadow: 0px 0px 2px 2px rgba(74, 164, 224, 0.5);
    grid-template-columns: 1.5fr 8.5fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas:
    "iconoLenguaje nombreLenguaje"
    "barra barra";        
    padding: 10px;
}
.logo_lenguaje{    
    grid-area: iconoLenguaje;      
    width: 85%;  
    height: 85%;
}
.nombre_lenguaje{
    padding: 0px 10px;
    grid-area: nombreLenguaje;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
}

.container_barra{
    grid-area: barra;
    display: flex;
    justify-content: center;
    align-items: center;    
    gap: 10px;
}
.barra{        
    appearance: none;
    width: 100%;
    height: 40%;
    border-radius: 10px;    
    background-color: rgba(139, 149, 156, 0.5);
}


/* ---- end ---- */


.skill_soft{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px;
}

.skill_soft p{
    width: 100%;
    height: 35px;
    border: solid 1px #000;
    padding: 2px;
    border-radius: 10px;
    background-color: #0d1b2a;
    font-size: 1rem;
    font-style: initial;
}
.container_img_code{
    display: none;
    
}

@media (max-height: 500px){
    header{
        height: 90px;
    }
    .container_skill{
        height: 40vh;
        width: 100%;
    }
    .skills{
        width: 90%;        
    }
}
@media (min-width: 800px) and (min-height: 700px){

    body{
        height: 100vh;
    }
    header{
        height: 10%;
        width: 100%;
    }
    main{
        height: 90%;
        width: 100%;
        flex-direction: row;
    }
    .training{
        height: 100%;
        width: 50%;
    }    
    .training section{
        flex: 1;
        padding: 5px;
        display: grid;
        grid-template-columns: 3fr 7fr;
        grid-template-rows: 3fr 6fr;
        grid-template-areas: "logo subtitulo" "logo descripcion";
        overflow: hidden;
    }
    .logo{
        grid-area: logo;
    }
    .subtitulo{
        grid-area: subtitulo;        
    }
    .descripcion{
        grid-area: descripcion;        
    }
    .container_img_code{
        display: flex;
        height: 40%;
        width: 100%;               
        align-items: center;
        justify-content: space-around;
        padding: 10px;

        gap: 10px;
        
    }
    #code_img{
        width: 40%;        
        height: 100%;
        border:  solid 1px #1eada6;
        border-radius: 20px;
        box-shadow: 0 0 20px 5px rgba(74, 164, 224, 0.5);
    }
    .skills{
        padding: 10px;
        height: 100%;
        width: 50%;
    }

    #Hard{
        width: 100%;
        height: 70%;
        padding: 5px;
    }

    .container_skill{    
        
        padding: 1px 10px 10px 0px;    
        width: 100%;
        
        grid-template-columns: 1.5fr 8.5fr;
        grid-template-rows: 1fr 6fr;
        overflow: hidden;
        grid-template-areas:
        "iconoLenguaje nombreLenguaje"
        "iconoLenguaje barra";        
    }

    #Soft{                
        width: 100%;
        height: 30%;        
        padding: 10px;
        display: flex;
        flex-direction: column;
    }
    
    .skill_soft{
        width: 100%;
        height: 80%;
        display: grid;
        grid-template-columns: 2fr 2fr;
        grid-template-rows: 2fr 2fr;
        grid-template-areas:        
        "a b"
        "c d";        
        box-shadow: 0 0 10px 5px rgba(74, 164, 224, 0.5);
        border-radius: 20px;
        overflow: hidden;    
    }
    #a{ grid-area: a;}
    #b{ grid-area: b;}
    #c{ grid-area: c;}
    #d{ grid-area: d;}
    .skill_soft p{
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    

    
}