/* dentro de body */
                         /* header, encabezado*/
* { font-family: sans-serif;
}


header{ display: block;
    background-color: #fd0f3d; 
    
}

                     /* header, encabezado, FLEX*/
header .contenedora {
    display: flex;
}

#menu {
    list-style: none;
    text-align: center;
    padding: 0em;
    }

nav{
    margin: auto;
    margin-left: 5em;
    margin-right: 5em; 
    padding: 0em;
    margin-top: 5px;
   }

nav ul{ 
    display:flex;
    justify-content:space-between;
}

nav ul li{ 
    background-color: #fd0f3d;
    width:100%;
}

nav ul li a{ 
    color:  #fd0f3d;
    display: block;
    background-color: white;
    margin: 5px;
   font-family:sans-serif;
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    font-weight: bold;
    padding: 5px;
}

nav ul li a:hover{ 
    color: white;
    background-color: #fd0f3d;
}
                               /* header, encabezado*/
                               /*PROPIEDADES DEL ENCABEZADO*/



                                 /* CUERPO PRINCIPAL */
main { margin-left: 5em;
    margin-right: 5em;
}


                            /* IMAGENES encabezado*/
img{
    width: 100%;}



#iconos{
    margin: auto;
    margin-left: 5em;
    margin-right: 5em;
    padding: 1em;
}

#iconos .logodgpc{
    height: 60px;
    width: auto;
}

#iconos .logodgpc:first-child{
    margin-right: 1em;
}

#iconos a{ 
    width:60px;
    height: auto;
    
    
}
                          /* PROPIEDADES DEL MAIN */
                             /* DESCRIPCION DE PERSONA, IMAGENES - 1 PARTE */
                           
main {
    display: flex;
    flex-direction: column;
}
  /* IMAGENES YO Y PRESENTACION DE MI PERSONA*/

#yo { 
    width: 100%;
}

#yo a{ 
    width: 100%;
    display: flex;
    justify-content: center;
}

#yo a img{ 
    width: 73%;
}


#DescripcionPersona {
    padding: 1em;
    box-shadow:  5px 10px 10px 2px #D1D1D1;
    background-color: #fd0f3d;
    color: white;
    border-radius: 30px 30px 30px 30px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
   }


                      /* MI NOMBRE*/
#DescripcionPersona h1{ 
    font-size: 3em;
    margin:5px 0px;
} 

#LogoInsta { 
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

#LogoInsta a{
    width: 10%;
}

                            /* INFO PERSONAL*/
#InfoPersonal {
     padding: 1em;
 border: 5px solid #fd0f3d;
    color: #fd0f3d;
    border-radius: 30px 30px 30px 30px;}

#ItemsInfoPersonal {
    color: black;
}
 
                           /* MATERIAS, POSTALES, INFO DE CATEDRA  - 2 PARTE */
                               /* MATERIAS*/
#materias {
     border: 5px solid #fd0f3d; 
         padding: 1em;
     border-radius: 30px 30px 30px 30px;}

section h2 {
    background-color: #fd0f3d;
    color: white;
    padding:  5px;
    border-radius: 30px 30px 30px 30px;
    font-size: 18px;
    text-align: center;
    }

h2{
    box-shadow: 0 4px 0 0 #fd0f3d;
    font-size: 30px;
}


                           /* POSTALES*/
.postales {
    font-size: 20px;
    
}

#postales {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 25px 0px;
}

#postales img{
    width:33%;
}

#TpTipografia figure{
    margin:25px 0px;
}

#TpTipografia figure figcaption{
    margin-top:25px;
}

                          /*INFO DE FADU Y DGPC*/

  
#Fadu{
    padding: 10px;
    background-color: #fd0f3d;
    color: white;
    border-radius: 30px 30px 30px 30px;
     text-decoration: none;
}

#Dgpc{
    padding: 10px;
    background-color: #fd0f3d;
    color: white;
    border-radius: 30px 30px 30px 30px;
    text-decoration: none;
    }

h5 {
    font-size: 20px;
    margin: 5px;
    margin-left: 15px;
   
}
                             /*ILUSTRACION IMAGENES */
#ilustracion{
    width: 44%;
    display: flex;  
}

                                        /*GRUPO*/ 
                                   /*INTEGRANTES DEL GRUPO */
#grupo{
    box-shadow:  5px 10px 10px 2px #D1D1D1;
    color: #fd0f3d;
    border-radius: 30px 30px 30px 30px;
    border: 5px solid #fd0f3d; 
    
}

#imagenesDeGrupo{
    display: flex; 
    flex-direction: row;
    justify-content: space-around;
    padding: 1em;
}

    
#imagenesDeGrupo a img {
    border-radius: 100px;
    font-weight: bold;
    padding: 5px;
    
    }
                     /*PARTE FINAL DEL BODY - FOOTER */
                                /*CARACTERISTICAS DEL FOOTER  */
footer {
    background-color: #fd0f3d; 
    padding: 10px;

}

footer>p { margin-left: 5em;
    margin-right: 5em;
    color: white;
}



  /*Luego del mobile first agregamos media para dispositivos con pantallas mas grandes*/


@media all and (min-width: 650px){
    main {
        flex-direction: row;
    }
    
    #ColumnaIzquierda{
        display: flex; 
        flex-direction: column;
        flex-basis: 350%;
        margin-right: 2em;
    }
      #ColumnaDerecha {
      flex-grow: 1;
    }
    #yo {
       width: 100%;
        height: auto;
    }
}

@media (max-width:650px) {
    nav, main, #iconos, footer>p {
        margin:0px 10px;
    }
}

@media (max-width: 500px){
    nav ul {
    flex-direction: column;
}
}