body {background-image: url(img/background.png); font-family: Verdana; color: #427255; margin: 0;}

.contenedor{
	width: 100%;
	margin: 0;
}
header{background-image: url(img/fondo.jpg); background-repeat: no-repeat; background-size: cover; padding: 2rem;
}

h1 {text-align: center; color:white; font-size: 8rem; -webkit-text-stroke: 2px purple; }


div .tuto { background: #eadaea; border-radius: 50rem; color: purple; display: flex; flex-direction: column; width: 60%; margin: 2rem auto; padding: 0.5rem; }

h4 {text-align: center; margin-block-start: 0.5em}

nav {margin-top: 3rem;}

nav ul {display: flex; padding: 0; justify-content: center;}

nav ul li {list-style-type: none; text-align: center; background: #e6d5f7;  margin: 0rem 2rem 0rem 2rem; border-radius: 0.4rem; width: 100%; }

nav ul li a {text-decoration: none; display: block; padding: 1rem 2rem; font-size: 1.5rem; color:purple; font-weight: bold;}

nav ul li a:hover {background-color: blueviolet;
color: white; border-radius: 0.4rem;}

h2 {text-align: center;font-size: 1.2rem;}

footer {font-style: italic; color: black; font-size: 0.8rem; text-align: center; background: #e6d5f7; margin-top: 8rem; padding: 0.5rem 4rem;}

section {display: flex; justify-content: center; width: 100%;}

article { text-align: center; margin: 1rem; padding: 0.5rem;  font-style: oblique; font-family: monospace; font-size: 1.5rem; background-color: white; border-radius: 2rem;}

article img {display: inline-block; border-radius: 2rem; border: 2px solid white;}

article img:hover {border: 2px solid blueviolet; }

article p{ padding: 1rem ; margin-block-end: 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;
	}
	div .tuto{
		width: 80%;
	}
	
	article{
		width: 50%;
	}
	section{
		flex-direction: column;
		justify-content: center;
	align-items: center;
	}
}