:root{
	--colorFondo: #232634;
	--colorH1: #a6d189;
	--colorH2: #f4b8e4;
	--colorH3: #ef9f76;
	--colorH4: #81c8be;
	--colorLink: #f2d5cf;
	--colorSeccion: #99d1db;
	--colorParrafo: #c6d0f5;
	--colorItem: #e78284;
	--colorCodigo: #eebebe;
}
/**/
html{
	font-size: 62.5%;
	box-sizing: border-box;
}
*, *:before, *:after{
	box-sizing: inherit;
}
body{
	font-size: 16px;
	font-family: sans-serif;
	background-color: var(--colorFondo);
}
/**/
h1{
	font-size: 4rem;
	text-align: center;
	color: var(--colorH1);
	padding: 0.5rem 0.5rem;
}
h2{
	font-size: 3rem;
	text-align: justify;
	color: var(--colorH2);
	padding: 0rem 15rem;
}
h3{
	font-size: 2.4rem;
	text-aling: justify;
	color: var(--colorH3);
	padding: 0rem 15rem;
}
h4{
	font-size: 2.2rem;
	text-aling: justify;
	color: var(--colorH4);
	padding: 0rem 15rem;
}
hr{
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.portada{
	display: block;
	margin: 0 auto;
	height: 30%;
	width: 60%;
	border: 0.5rem solid #949cbb;
	border-radius: 1rem;
}
.imagenseccion{
	display: block;
	margin: 0 auto;
	height: 25%;
	width: 25%;
	border: 0.5rem solid #949cbb;
	border-radius: 1rem;
}
.listablogs{
	display: flex;
	flex-direction: column;
	align-items: center;
}
p{
	font-size: 1.8rem;
	color: var(--colorParrafo);
	text-align: justify;
	padding: 0 15rem;
}
.item{
	font-size: 1.5rem;
	color: var(--colorItem);
	text-align: justify;
	padding: 0 20rem;
}
.codigo{
	font-size: 1.4rem;
	color: var(--colorCodigo);
	text-align: justify;
	padding: 0 18rem;
}
span{
	color: var(--colorLink);
	font-weight: bold;
}
.link{
	font-size: 1.8rem;
	color: var(--colorLink);
	text-decoration: none;

}
.link:hover{
	color: var(--colorSeccion)
}
nav{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.seccion{
	font-size: 2.5rem;
	color: var(--colorSeccion);
	text-decoration: none;
	padding: 1rem 4rem;
}
.seccion:hover{
	color: var(--colorLink);
}
.etiquetasweb{
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 1rem 4rem;
}
/*media-querys*/
@media (max-width: 480px){
	h1, h2, h3, h4{
		font-size: 1.8rem;
		text-align: center;
		padding: 0 2rem;
	}
	.portada{
		height: 40%;
		width: 80%;
	}
	.imagenseccion{
		height: 50%;
		width: 50%;
	}
	p, span, .item, .codigo, .link{
		font-size: 1.3rem;
		text-align: justify;
		padding: 0 1rem;
	}
	nav{
		flex-direction: column;
		align-items: center;
	}
	.listablogs{
		align-items: flex-start;
	}
	.seccion{
		font-size: 2rem;
		text-decoration: none;
		padding: 1rem 2rem;
	}
	.etiquetasweb{
		flex-direction: column;
		justify-content: center;
		padding: 2rem 2rem;
	}
}