*{
    box-sizing: border-box;
}



header{
    background-color:rgb(44, 253, 201);
    width: 100%;
    padding: 1em;
}


/* solo las imagenes que estan dentro de una etiqueta cuyo id es "logo" */
#logo img {
    /* es transparente se le puede asignar color de fondo*/
    background-color: ghostwhite;
    /* el color de fondo se extiende mas alla de la imagen */
    padding: .5em;
    /* tiene borde, (tipo de borde -espesor - color)*/
    border: 1em ghostwhite;
    /* bordes redondeados*/
    border-radius: .5em;
    /*relacion de aspecto 2 a 1*/
    aspect-ratio: 2/1;
    width: 7em;
    }

    ul,
ol {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 1px;
margin-inline-end: 1px;
/* retira el relleno izquierdo predeterminado*/
padding-inline: 0;
/* elimina bullets, numeros, etc.*/
list-style-type: none;

}

/*a la lista del menu del encabezado*/
header nav ul{
    /*elimina los margenes arriba y abajo que vienen predeterminados*/
    margin-bottom: auto;
}
/*vinculos pero solo los del menu superior*/
header nav a{
color: white;
background-color:rgb(254, 5, 113);
/* para darle propiedades de caja (margen) */
display: block;
/* ancho igual a su contenido*/
width: max-content;
/*separa los botones 1/8 del tamaño del texto */
margin: .125em;
/* relleno arriba y abajo 1/4 del tamaño del texto */
padding-inline: 1em;
/* border redondeado 1/4 del tamaño del texto */
border-radius: 1em;
}
/*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
header nav a:hover{
   
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: .125em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1em;
    color: white;
    background-color:rgb(69, 2, 255);
}

body{
    /*familia tipografica general del proyecto (sus elementos contenidos la heredan) */
    /* la definida en la "paleta de diseño" */
    font-family:Arial, Helvetica, sans-serif;
    /* se retiran los 8 pixeles que vienen predeterminados para que sus elementos contenidos lleguen hasta los bordes de la ventana del navegador */
    margin: 0;
    background-color:white;
   }

   /* todos los vinculos */
a{
    /* no estaran subrayados*/
    text-decoration: none ;
    color: rgb(254, 5, 113);
    /* diferente familia tipoografica*/
    font-family: Arial, Helvetica, sans-serif ;
    /* negrita*/
    font-weight: lighter;
}

/* caja contenedora centrada y con ancho maximo
selector de tipo de clase 
elementos html diferentes tendran caracteristicas en comun */
.contenedora{
    /* ancho maximo */
    width: min (100% 40rem);
    /* centrado horizontal (si sobra espacio, lo distribuye a la izquierda y derecha) */
    margin-inline: auto;
    padding: .5rem;
    }

    #uba img {
        /* es transparente se le puede asignar color de fondo*/
        background-color: rgb(255, 255, 255);
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em rgb(255, 255, 255);
        /* bordes redondeados*/
        border-radius: .5em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: 2/1;
        width: 7em;
        }

        #acumar img {
            /* es transparente se le puede asignar color de fondo*/
            background-color: rgb(255, 255, 255);
            /* el color de fondo se extiende mas alla de la imagen */
            padding: .5em;
            /* tiene borde, (tipo de borde -espesor - color)*/
            border: 1em rgb(255, 255, 255);
            /* bordes redondeados*/
            border-radius: .5em;
            /*relacion de aspecto 2 a 1*/
            aspect-ratio: auto;
            width: 7em;
            }

    /*componente superior y sus contenidos tanto header como footer */
footer {
    background-color:rgb(254, 5, 113);
    color: white;
    padding-top: 1em;
    padding-bottom: 1em;
    }

body{
    color:rgb(69, 2, 255);
}

h1, h2, h3 {
    color:white;
}

/*a la lista del menu del encabezado*/
.linksrotulos{
    /*elimina los margenes arriba y abajo que vienen predeterminados*/
    margin-bottom: auto;
}
/*vinculos pero solo los del menu superior*/
.linksrotulos a{
color:rgb(69, 2, 255);
background-color:rgb(44, 253, 201);
/* para darle propiedades de caja (margen) */
display: block;
/* ancho igual a su contenido*/
width: max-content;
/*separa los botones 1/8 del tamaño del texto */
margin: .125em;
/* relleno arriba y abajo 1/4 del tamaño del texto */
padding-inline: 1em;
/* border redondeado 1/4 del tamaño del texto */
border-radius: 1em;
}
/*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
.linksrotulos a:hover{
   
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: .125em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1em;
    color: white;
    background-color:rgb(254, 5, 113);
}

/*a la lista del menu del encabezado*/
.behance{
    /*elimina los margenes arriba y abajo que vienen predeterminados*/
    margin-bottom: auto;
}
/*vinculos pero solo los del menu superior*/
.behance a{
color:white;
background-color:rgb(69, 2, 255);
/* para darle propiedades de caja (margen) */
display: block;
/* ancho igual a su contenido*/
width: max-content;
/*separa los botones 1/8 del tamaño del texto */
margin: .125em;
/* relleno arriba y abajo 1/4 del tamaño del texto */
padding-inline: 1em;
/* border redondeado 1/4 del tamaño del texto */
border-radius: 1em;
}
/*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
.behance a:hover{
   
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: .125em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1em;
    color:rgb(255, 255, 255);
    background-color:rgb(254, 5, 113);
}

.texto_bio{
    color: white;
    padding-left: 1em;
}

.mjg{
    background-color:rgb(69, 2, 255);
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

#mjg img{
    background: none;
    border: none;
    border-radius: 20%;
    width: 15em;
    aspect-ratio: auto;
    padding-left: 1em;
}

h1,h2, h3, h4{
    color:rgb(254, 5, 113);
}

.titulo{
    display: flex;
    justify-content:center;
    
    color: rgb(69, 2, 255);
    padding-top: .2em;
    padding-bottom: .2em;
}

.titulorotulos{
    display: flex;
    justify-content: center;
    
    color: rgb(69, 2, 255);
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: 1em;
    align-content: center;
}

#mjg{
    padding-top:  1em;
    padding-bottom: 1em;
    padding-right: 1em;
}

a{
    display: flex;
    justify-content: center;
}


.titulomjg{
    display: flex;
    justify-content: center;
    background-color: rgb(254, 5, 113);
    color: white;
    padding-top: .5em;
    padding-bottom: .5em;
}

.linksrotulos{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1em;
    gap: .5em;
}

.behance{
    display: flex;
    justify-content: center;
    padding-bottom: 1em;
}

.materias{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}

.logos{
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 1em;
    align-items: center;
}

.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2em;
}

.titulo2{
    display: flex;
    background-color: none;
    justify-content: center;
    color:rgb(69, 2, 255);
}

#mjg{
    display: flex;
    justify-content: center;
}

.footer{
    padding-left: 1em;
}

.texto{
    display: flex;
    justify-content: center;
}

.titulo_datos{
    display: flex;
    justify-content: center;
    color: white;
}

.titulo_autoridades{
    display: flex;
    justify-content: center;
    color: white;
}

.footer{
    background-color: rgb(69, 2, 255);
   padding-top: 1em;
   padding-bottom: 1em;
}

.titulopropuesta{
    display: flex;
    justify-content: center;
    color: rgb(69, 2, 255);

}

.listadomaterias{
background-color: rgb(44, 253, 201);
padding-bottom: 2em;

}

.linkig{
    background-color: rgb(69, 2, 255);
    padding-bottom: 1em;
}

.tituloig{
    display: flex;
    justify-content: center;
color: white;
}
.tituloredes{
    display: flex;
    justify-content: center;
color: white;
}
.portafolio{
    background-color:rgb(44, 253, 201);
    color:rgb(69, 2, 255);
}
.rotulos{
    background-color: rgb(69, 2, 255);
    padding-bottom: 1em;
}

.titulorotulos{
    display: flex;
    justify-content: center;
color: white;
}

#instagram img{
     /* es transparente se le puede asignar color de fondo*/
     background-color: none;
     /* el color de fondo se extiende mas alla de la imagen */
     padding: .5em;
     /* tiene borde, (tipo de borde -espesor - color)*/
     border: 1em none;
     /* bordes redondeados*/
     border-radius: .5em;
     /*relacion de aspecto 2 a 1*/
     aspect-ratio: auto;
     width: 7em;
     }


.tituloportafolio{
    display: flex;
    justify-content: center;
    color:rgb(69, 2, 255);
    padding-top: .2em;
}

    #boceto1 img{
        /* es transparente se le puede asignar color de fondo*/
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em none;
        /* bordes redondeados*/
        border-radius: .5em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 100%;
        }
        #boceto2 img{
            /* es transparente se le puede asignar color de fondo*/
            background-color: none;
            /* el color de fondo se extiende mas alla de la imagen */
            padding: .5em;
            /* tiene borde, (tipo de borde -espesor - color)*/
            border: 1em none;
            /* bordes redondeados*/
            border-radius: .5em;
            /*relacion de aspecto 2 a 1*/
            aspect-ratio: auto;
            width: 100%;
            }
            #boceto3 img{
                /* es transparente se le puede asignar color de fondo*/
                background-color: none;
                /* el color de fondo se extiende mas alla de la imagen */
                padding: .5em;
                /* tiene borde, (tipo de borde -espesor - color)*/
                border: 1em none;
                /* bordes redondeados*/
                border-radius: .5em;
                /*relacion de aspecto 2 a 1*/
                aspect-ratio: auto;
                width: 100%;
                }

                #boceto4 img{
                    /* es transparente se le puede asignar color de fondo*/
                    background-color: none;
                    /* el color de fondo se extiende mas alla de la imagen */
                    padding: .5em;
                    /* tiene borde, (tipo de borde -espesor - color)*/
                    border: 1em none;
                    /* bordes redondeados*/
                    border-radius: .5em;
                    /*relacion de aspecto 2 a 1*/
                    aspect-ratio: auto;
                    width: 100%;
                    }

       

@media screen and (min-width:500px) {
    header .contenedora{
        display: flex;
        justify-content:center;
        flex-direction: column;
        align-items: center;
       
        
    }

    #logo{
        display: flex;
        justify-content: center;
        align-self: center;
    }
 .menu{
     display: flex;
     justify-content: center;
     flex-direction: row;
     gap: .5em;
     padding-left:  1em;
 }


 .mjg{
    display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   width: calc(100%);
     
 }

 .mjg article{
     display: flex;
     flex-direction: row;
     align-items: center;
    

 }

 #mjg{
     display: flex;
     justify-content: flex-start;
     padding-left: 1em;
 }

 .propuesta{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;

}

.propuesta article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(45% - .5em);
}


  
@media screen and (min-width:1024px){
    header .contenedora{
        display: flex;
        justify-content:space-between;
        flex-direction: row;
        align-items: center;
    }
    .mjg article{
        display: flex;
        flex-direction: row;
        align-items: center;
        
    }
    .propuesta{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1em;
    
    }
    
    .propuesta article{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(20% - .5em);
    }
}
}