body {background: white;}
header {text-align: center; font-family: Roboto Slab serif; background-image: url(img/header.jpg);}
nav ul {font-family: verdana; display: flex;}
nav ul li {background: rgba(16, 188, 89, 0.64); list-style-type: none; text-align: center; margin: auto; font-size: 1.4rem; padding: 1rem;}
a {text-decoration: none; color: black;}
a:hover {background-color: aliceblue;}
h2 {font-family: "Roboto Slab"; font-weight: 300; font-size: 2rem; padding: 2rem; text-align: center;}
h4 {font-family: sans-serif; font-size: 1.7rem}
p {font-family: monospace; font-size: 1.5rem;}
footer p {font-family: cursive; font-family: verdana; padding: inherit; margin-top: 20rem; font-size: 0.7rem}
header div img {border-radius: 42rem; width: 200px; height: 200px; padding: 1rem;}
header h2.eva {margin: 0rem 0rem 3rem 0rem; font-family: "Roboto Slab"; font-size: 3rem; font-style: bold; font-variant: small-caps;}
section {display: flex;}
article {background: rgba(223, 232, 225, 0.82); border-radius: 5rem; text-align: justify-all; list-style-type: square; padding: 3rem;}
article h4 {margin: 1rem; text-align: center; font-size: 1rem;}
article li {font-family: Verdana; font-size: 0.8rem;}
div.grupo {display: block; background: rgba(228, 197, 253, 0.75); }
nav.inte ul li {font-size: 0.8rem; background: rgba(255, 255, 255, 0);}

@media screen and (max-width: 400px){
    
    h1{font-size: 5rem;}
    nav ul{
			flex-direction: column;
		justify-content: center;
	align-items: center;
	}
	nav ul li{
		width: 100%;
		margin-top: 1rem;
		
	article{
		width: 50%;
	}
	section ul{
		flex-direction: column;
		justify-content: center;
	align-items: center;
	}