/*--------M I  I N D E X *----------------------------------*/

@charset"utf-8";


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,100;1,300;1,400&display=swap');
body{font-family: 'Roboto', sans-serif;
font-weight:bold;
    
    /*felixibiliza las cajas dentro del body y las pone horizontales*/
    display: flex;
    
     /* las cajas dentro del body las pone verticales*/
    flex-direction: column;

     /* organiza los elementos por el eje principal osea vertical,los separa verticalmente*/

justify-content:center;}


*{text-align:center}

body{background-color:#2f2519;color:#000}
/*barra de navegacion*/
.menu{list-style: none;background-color:#FA7D09;display:flex;flex-direction: row;justify-content: center;padding:10px 0px;width: 100% }
.menu li{padding:0px 40px}
.menu li a{text-decoration: none;color: black;;text-transform: capitalize}
.menu li a:hover{font-size: 30px;color: aliceblue}
header img{;border-radius:50%;box-shadow:1px 5px 5px 1px #ff4301}
h1{background:#FA7D09;width: 50%;display: inline-block;padding: 5px 20px;box-shadow:1px 5px 5px 1px #ff4301}

.datos{background:#FA7D09;width:50%;display: inline-block;padding: 0px 20px;}
.datos a:hover{text-decoration:none;color: white}


.redes ul{list-style:none;display: flex;flex-direction: row;justify-content: center;padding:0px 30px}
.redes{background-color:#FA7D09;width:50%;display: inline-block;margin:20px 0px;padding: 20px}
.redes li a{text-decoration: none;color: black}
.redes li a:hover{text-decoration:underline;color: white}


.materia{display:flex;background-color:#FA7D09;justify-content: center;width:95%;padding: 0px 10px;}
.materia ul{list-style: none;display:flex;flex-direction: column;}
.materia h4{text-decoration:underline;}
.materias ul{font-size: 15px}

.comitente{margin: 20px;background:#FA7D09;width: 80%;display:inline-block;padding: 20px}

.comitente ul {list-style: none;display: flex;flex-direction: row;justify-content:space-between;}
.comitente ul a{display: flex;justify-content: center;width:60%;color: black;text-decoration: none;font-size: 15px}
.comitente ul a:hover{text-decoration:underline;color: white;font-size: 20px}


blockquote{color: white}
footer{color: white}












/*_______________R e s p o s i v *____________________________________*/


@media screen and (max-width:600px){
    .menu{display: flex;width:575px}
    .avatar{display: inline-block;margin:0px 190px}
    h1{width: 250px;margin:20px 140px}
    .datos{width: 150%;margin: 10px}
    .redes{width: 100%;margin:5px 97px}
    .materia{width: 150%;margin:5px 20px}
    h3{margin:25px 60px}
    .comitente{margin:10px 130px}
    .comitente ul{padding: 5px;width: 105%}
    blockquote img{margin: 5px 150px}
    blockquote p{display:inline-block;width:150%;margin:5px 50px}
    footer{display:inline-block;width:150%;margin:0px 50px}
    hr{display: flex;margin:20px 0px;width: 166%}
    footer{display: flex;margin:0px 50px}
}