body {
	background-image: linear-gradient(gainsboro,white);
	max-width: 1280px;
	background-size: 100vw 100vh;
	background-attachment: fixed;
	scroll-behavior: smooth;
	margin: auto;
}


div.header {
	color: black;
	text-align: center;
	font-family: "Special Gothic Condensed One", sans-serif;
	font-size: 20px;

}

div.subheader {
	display: flex;
	justify-content: space-between;
	color: black;
	font-family: "Special Gothic Condensed One", sans-serif;
	padding: 20px;

}

div.about {
	font-family: "Special Gothic Condensed One", sans-serif;
	text-align: center;
	font-size: 20px;
	padding: 0 100px;
	justify-content: center;
}

a {
	font-family: "Special Gothic Condensed One", sans-serif;
	color: black;
	font-size: 50px;
}
h1 {
	color: black;
	font-family: "Special Gothic Condensed One", sans-serif;
	font-size: clamp(100px, 25vw, 250px);
	text-align: center;
	margin: 0;
	line-height: 187px;
}


img {
	width: 300px;
}

img.portada {
	width: 300px;
	display:block;
	margin: auto;
	filter: saturate(0);
	transition: 0.5s;
 }

 img.portada:hover{
 	filter: saturate(1);
 }

h2 {
	color: black;
	font-family: "Special Gothic Condensed One", sans-serif;
	font-size: 40px;
	text-align: center;
}
h3 {
	font-family: "Special Gothic Condensed One", sans-serif;
	font-size: 35px;
	text-align: center;
}

h4 {
	 font-family: "Archivo Narrow", sans-serif;
	 font-weight: 600;
	 font-size: 20px;
	 margin: 0;
	 text-align: center;

}

div.animacion img {
	display: block;
	width: 150px;
	height: auto;
	object-fit: cover;
	margin-top: 20px;
	
}


 table {
 	font-family: "Archivo Narrow", sans-serif;
 	margin: 30px;	
 }

 td {
 	padding: 10px;
 	border-bottom: 1px solid black;
 }

section.info {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 40px 0px;
	box-sizing: border-box;

}

div.text {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 1024px;
	width: 100%;
	justify-items: center;
	align-items: stretch;
	box-sizing: border-box;

	p {
		font-family: "Archivo Narrow", sans-serif;
		font-weight: <400>;
		margin: 1;
		text-align: center;
	}
}

/* animacion */
div.animacion {
	background-image: url(road.png);
	background-repeat: no-repeat;
	background-size: lenght;
	background-position: center 60px;

}


div.animacion img {
	animation-name: deslizar;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

@keyframes deslizar {
	0% {
		transform: translate(0px,0px);
	}
	25% {
		transform: translate(30vw,0px);
	}
	50% {
		transform: translate(60vw,0px);
	}
	75% {transform: translate(30vw,0px);

	}
	100% {
		transform: translate(0px,0px);
	}
}

div.footer{
	text-align: center;
}

div.footer a {
	display: inline-block;
}

@media screen and (min-width:768px) {
	div.text {
 		grid-template-columns: 1fr;
 	}
 }
@media screen and (min-width: 1024px) {
	div.text  {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* aqui empieza el portfolio */

div.portfolio {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
	justify-content: center;
	padding: clamp(10px, 5vw, 40px);
	box-sizing: border-box;

	
}
div.portfolio img {
	width: 100%;
	height: 200px;
	display: block;
	object-fit: cover;
	filter: blur(5px);
	transition: 0.5s;

}
div.portfolio img:hover {
	filter: blur(0px);
}

div.item {
	font-family: "Archivo Narrow", sans-serif;
	color: black;

}

div.cv {
	text-align: center;
}

div.cv a {
	display: inline-block;
}



@keyframes deslizar {
	0% {
		transform: translate(0px,0px);
	}
	25% {
		transform: translate(50vw,0px);
	}
	50% {
		transform: translate(80vw,0px);
	}
	75% {transform: translate(50vw,0px);

	}
	100% {
		transform: translate(0px,0px);
	}
}

@media screen and (min-width:768px) {
 	div.portfolio {
 		flex-direction: row;
 	}

 	div.portfolio {
 		grid-template-columns: 1fr 1fr;
 	
 	}
 }
@media screen and (min-width: 1024px) {
	div.portfolio {
		grid-template-columns: 1fr 1fr 1fr;
		
	}
}