/* ------ GENERAL ------ */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        font-size: 100%;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
    }

    img {
        max-width: 100%;
        height: auto;
    }

   
       
    }

    a {
        text-decoration: none;

        
    }

    ul {
        
    }



    /* ------ PRIMERO REGLAS PARA CELULAR - MOBILE FIRST ------ */
    @media screen and (min-width: 300px){
        
        /* ------ header y barra de navegación ------ */

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.1em;
            background-color: rgb(41, 73, 255);
        
        }
    
        #contenedor {
        
           display: flex;
           justify-content:space-between;
           align-items: center;
    
      
        }

        #logo {
            margin: 0.2em 0 0 0;
            width: 4.5em;
            padding: 0.7em;
            filter: invert();
            
        }

        

        header nav ul {
            
            display: flex;
            flex-wrap:nowrap;
            font-size: 0.7em;
            
          
          
        }
        header nav ul li {
            
            min-width: 4.5em;
            
        
        }
        header nav ul li a{
            text-decoration: none;
            color: rgb(255, 255, 255);
            display: block;
            width: 4em;
            text-align: center;
            text-transform: uppercase;
        }

        #fondo {
            background-image: url(imagenes/portada2.jpg);
            background-repeat: no-repeat;
            background-size: 120%;
            background-position-y: 25%;
            background-position-x: 60%;
            height: 7em;
        }
     
        /* ------ MAIN ------ */

        main {
            margin: 0em 0 1em 0;
        } 

        h2{
            margin-top: 1em;
            text-align: center;
            font-size: 1.2em;
            color: rgb(58, 59, 173);
        }

        /* ------ Presentación ------ */

       .sobremí {
           margin: 0 0 1em 0;
       }

        #nombreyfoto article{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0 0.8em 0 0;
            
            
        }
        
        #nombreyfoto h1{
            font-size: 1.3em;
            text-align: center;
            color: rgb(21, 24, 204);
            padding: 1em;
            background-color: rgb(255, 234, 255)
        }

        #nombreyfoto h2{
            padding: 0 0 0.8em 0;
            font-size: 1em;
            text-align: left;
            color: rgb(22, 23, 109);
        }

        #nombreyfoto p {
            display: block;
            font-size: 0.8em;
            text-align: left;
            color: rgb(0, 0, 0);
        }

        #fotodeperfil img {
            width: 100%;
            padding: 1em;
            
  
        }

        #fotodeperfil figure {
            width: 50%;
        }

        article > div {
            width: 50%
        }

        

        

        /* ------ Historial academico ------ */


        .historial {
            
            background-color: rgb(38, 37, 119)
           
              
        }
       
        .historial h3 {
            text-align: center;
            font-size: 1.1em;
            color: rgb(228, 243, 255);
            background-color: rgb(28, 28, 204);
            padding: 1em;
           
           
            

            
        }

        .historial h4 {
            color: rgb(255, 129, 238);
            font-weight: 500;
            text-align: left;
            padding: 1em 0  1.2em 0;
            
        }

        .historial h5 {
            color: azure;
            font-size: 0.8em;
            text-align: left;
            padding: 1.2em 0 0.8em 0;
            
        }

        .historial p {
            font-size: 0.8em;
            color: rgb(207, 210, 252);
            line-height: 2.5em;
            
            text-align: left;
            
            
            
        }

        .cursada {
            
            padding: 1em 0em 2em 1em;
           
        }

        

        /* ------ Materias en curso ------ */

        #encurso {
            text-align: center;
            background-color: rgb(38, 37, 119);
            height: 210px;
            
        }

        #encurso h3 {
            text-align: center;
            font-size: 1.1em;
            color: rgb(228, 243, 255);
            background-color: rgb(28, 28, 204);
            padding: 1em;
        }

        .materias {
            margin-top: 1em;
            margin-bottom: 1.2em;
        }

        .materias p {
            font-size: 0.9em;
            color: rgb(207, 210, 252);
            line-height: 2.5em;
            
            
        }

        /* ------ Proceso ------ */

        .porcentaje {
            background: rgb(0, 38, 255);
            text-align: center;
            padding: 1em 0 1.5em 0;
            
        }

        .porcentaje h3{
            font-size: 1.2em;
            color: white;
            font-weight: 500;
            margin-bottom: 0.8em;
           
           
    
        }

        .porcentaje img {
            width: 16em;
        }

        


        /* ------ Integrantes ------ */

        .grupovm12 {
            
            padding-bottom: 0.5em;
            

            
        }

        .grupovm12 article{
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           align-items: center;
           margin: 1em 0.7em 1.5em 0.7em;
           padding: 0.8em;
           background: rgb(218, 217, 255);
           border-radius: 12px;
           
          
           
            
        }

        .grupovm12 article div{     
            font-size: 0.8em;
            margin: 0.7em;
     
        }

        


        .grupovm12 article div h4{
            color: rgb(0, 38, 255); 
            font-size: 0.9em; 
            text-transform: uppercase;
            margin: 0 0 0.6em 0;
        }

    

        .grupovm12 img {
            width: 6.5em;  
            align-items: center; 
            
                 
        }



        .grupovm12 h3 {
            text-align: left;
            font-size: 1.1em;
            color: rgb(0, 38, 255);
            padding: 1em;
            margin: 1em 0 0 0;
            
        }

        

        /* ------ Ejercicios ------ */

        .dgpcinfo {
            
            text-align: center;
            height: 430px;
            
        }

       

        .dgpcinfo h2{
            text-align: left;
            font-size: 1.1em;
            color: rgb(15, 30, 119);
            padding: 1em 0 0 1em;
          
            
        }

      
        .dgpcinfo h3{
            font-size: 0.8em;
            text-align: left;
            color: rgb(18, 18, 136);
            margin: 4em 0 0em 5em;
            text-transform: uppercase;
           
        }

        .dgpcinfo div {
            text-align: left;
            margin: 1em 0 1em 4em;
           
        }


        /* ------ FOOTER ------ */

        .redes{
            background-color:rgb(36, 69, 255);
            padding: 1.5em;
            text-align: center;
            
        }
        .redes h5{
            text-align: center;
            color: rgb(255, 255, 255);

        }

        .aclaraciones {
            background-color: black;
            color: cornsilk;
            padding: 1.5em;
            padding-top: 2em;
            box-sizing: border-box;
            font-size: 0.8em;
            text-align: center;
        }
    }



    /* ------ REGLAS PARA WEB------ */
    @media screen and (min-width: 400px){
        #nombreyfoto article{
            align-items: center;
 
        }

    }

    

    /* ------ REGLAS PARA WEB------ */
    @media screen and (min-width: 600px){

         /* ------ Presentacion------ */

        header nav {
            margin: 0 0 0 0;
            display: flex;
            flex-wrap:nowrap;
            justify-content:left;
            font-size: 1.2em;

    }

    #fondo {
        background-image: url(imagenes/portada2.jpg);
        background-repeat: no-repeat;
        background-size: 120%;
        background-position-y: 25%;
        background-position-x: 60%;
        height: 13em;
    }

    #fotodeperfil img {
        width: 75%;
        padding: 2em;
        margin-left: 5em;
        
    }
    
    #nombreyfoto article{
       
        justify-content: center;

    }

    #nombreyfoto h1{
        font-size: 1.8em;
        text-align: center;
        color: rgb(21, 24, 204);
        
    }

    #nombreyfoto h2{
        font-size: 1.3em;
        text-align: left;
        color: rgb(62, 65, 245);
    }

    #nombreyfoto p {
        font-size: 1em;
        text-align: left;
        color: rgb(0, 0, 0);
        margin-right: 1em;
        
    }

    /* ------ Historial------ */
    .historial {
   
        background-color: rgb(38, 37, 119);
          
    }

    .historial h4 {
        color: rgb(255, 179, 245);
        font-weight: 500;
        text-align: left;
        padding: 2em 0  0em 0;
        text-transform: uppercase;
        
    }



    .historial h5 {
        color: azure;
        font-size: 0.8em;
        margin: 1em 0 0em 2.6em;
        text-align: left
        
    }

    .historial p {
        font-size: 1em;
        color: rgb(207, 210, 252);
        line-height: 1.6em;
        padding: 0.8em 1em 0em 2em;
        display: flex;
        justify-content: left;
        

    }

    .cursada {
            
        padding: 2em 0em 3em 1em;
        margin-left: 7em;
       
    }

    /* ------ Porcentaje------ */

    .porcentaje {
        height: 150px;
    }

    .porcentaje h3{
        font-size: 1.3em;
        color: white;
        font-weight: 500;
        margin-bottom: 1.6em;
        margin-top: 0.3em;

    }

    .porcentaje img {
        width: 18em;
    }


    /* ------ Integrantes------ */

    .grupovm12 article{
        width: 20em;
           margin: auto;
           margin-bottom: 1em;
           margin-top: 2.2em;
    }

    .grupovm12{
        height: 600px;
    }

    








    /* ------ REGLAS PARA WEB 2------ */
    @media screen and (min-width: 900px){
        #fondo {
            background-image: url(imagenes/portada2.jpg);
            background-repeat: no-repeat;
            background-size: 120%;
            background-position-y: 25%;
            background-position-x: 60%;
            height: 20em;
        }

        #fotodeperfil {
            height: 300px;
        }

        #fotodeperfil img {
            width: 55%;
            padding: 2em;
            margin-left: 12em;
            
        }

        #nombreyfoto h2{
            font-size: 1.4em;
            text-align: left;
            color: rgb(62, 65, 245);
        }


        #nombreyfoto p {
            font-size: 1.2em;
            text-align: left;
            color: rgb(0, 0, 0);
            margin-right: 7.5em;
            
        }
        
        /* ------ Historial Académico------ */
        .historial h3 {
            font-size: 1.2em;
            padding: 1.2em;
        }

        .historial h4 {
            padding: 2em 0  0em 0;
            text-transform: uppercase;
            margin-left: 8em;
            font-size: 1.1em;
            
        }
    
    
    
        .historial h5 {
            color: azure;
            font-size: 0.9em;
            margin: 1em 0 0em 12em;
            text-align: left
            
        }
    
        .historial p {
            font-size: 1.1em;
            color: rgb(207, 210, 252);
            line-height: 1.6em;
            padding: 0.8em 1em 0em 10em;
            display: flex;
            justify-content: left;
            
    
        }
    
        .cursada {
                
            padding: 2em 0em 3em 1em;
            margin-left: 7em;
            height:1210px;
           
        }

        /* ------ materias en curso------ */

        #encurso h3 {
            
            font-size: 1.2em;
            
           
            padding: 1.2em;
        }

        /* ------ Integrantes------ */

        .grupovm12 h3 {
            font-size: 1.2em;
            padding: 1.2em;

        }


    

   





        /* ------ REGLAS PARA WEB 3------ */
        @media screen and (min-width: 1920px){

            #fondo {
                background-image: url(imagenes/portada2.jpg);
                background-repeat: no-repeat;
                background-size: 120%;
                background-position-y: 25%;
                background-position-x: 60%;
                height: 42em;
            }
            

             /* ------ Presenacion------ */ 

             #nombreyfoto h1{
                font-size: 2.1em;
                height: 120px;
            
                
            }

            #fotodeperfil img {
                width: 35%;
                padding: 2em;
                margin-left: 32em;
                
            }

            #nombreyfoto p {
                font-size: 1.5em;
                text-align: left;
                color: rgb(0, 0, 0);
                margin-right: 20em;
                
            }

            #fotodeperfil {
                height: 400px;
            }




           
            .grupovm12 img {
                width: 7em;  
                align-items: center; 
                margin-left: 45em;
                    
            }

            /* ------ Historial------ */
            

            .historial h4 {
                color: rgb(255, 129, 238);
                font-weight: 500;
                padding: 1em 0em 1.5em 0em;
                margin-top: 1em;
                font-size: 1.1em;
                margin: 1em 0 0em 0em;
                
                
                
            }

            .historial h3 {
                font-size: 1.3em;
                
                
                
            }

            .historial h5 {
                color: azure;
                font-size: 0.8em;
                
                margin: 0em 0 0em 0em;
                
             
                
            }

            .historial p {
                
                color: rgb(207, 210, 252);
                line-height: 0.6em;
                padding: 1.3em 0em 0em 0em;
                
                
            }

            .cursada {
                display: flex;
                justify-content: space-evenly;
                height:500px;
                padding-left: 0em;
            }

            /* ------ Materias en curso ------ */

            #encurso {
            
            height: 240px;
            
        }

            .materias p {
                font-size: 1.1em;
                line-height: 2.5em;
                
                
            }

             /* ------ Integrantes------ */

             .grupovm12{
                height: 300px;
            }

            .grupovm12 img {
                width: 9em;  
                align-items: center; 
                margin-left: 1em;
                    
            }

            .grupovm12 article{
            
                background: rgb(224, 217, 255);
                border-radius: 12px;
                width: 30em;
        
             }

            .integrante {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                
            }

            .grupovm12 article div{     
                font-size: 1.1em;
                margin: 1em;
         
            }
    


    

        
        



    }