@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500;700&display=swap');

*{padding: 0; margin: 0;transition: 1s all;}

/* Estilos generales */

body{ font-family: 'Roboto Mono', monospace; margin: 0;} 

header { color: #e9a8a7; background: #002f6c; padding: 2rem; text-align: center;  }
header h1 {font-family: 'Roboto Mono', monospace; text-align: center; }



nav { background: #01579b; padding: 1rem; font-size: 1rem; }

nav ul li { display: inline-block; }
nav ul li a { color: aliceblue; text-decoration: none; font-size: 1rem; }

#navegar li a:hover { background-color: #e9a8a7; color: #01579b ; text-align: center; justify-content: center; padding: 1rem }
#navegar li { padding-inline-start: 20px; } 



main section article { padding: 3rem;}
main section article img {border-radius: 50%; height: 40%;}

h2{font-family: 'Roboto Mono', monospace; font-size: 1.6rem; font-weight: 700; margin: 1.5rem; color: #01579b; }
h4{font-family: 'Roboto Mono', monospace; font-size: 1.2rem; font-weight: 700; padding: 1rem; color: #e9a8a7; }


.columna {background: #edf7ff; font-size: 1rem; text-align: center; font-weight: 500; }

p {display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px;}

footer { background: #e9a8a7; padding: 1rem;}
footer p{ font-size: 0.8rem; font-family: 'Roboto Mono', monospace; font-weight: 500; text-align: center; } 


/* cuando es mayor a 768px */
@media screen and (min-width:48rem){
    
    nav { background: #01579b;}
    nav ul li a {font-size: 1.3rem}
    #navegar li {padding-inline-start: 50px;}
    #navegar li a:hover {background-color: #e9a8a7;}