@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
html, body{
	overflow-x:hidden;
}
*{
	box-sizing: border-box;
	font-family: "Work Sans";
	margin: 0;
	padding: 0;
}
hml{
	scroll-behavior: smooth;
}
.contenedor-header{
	background: #1e2326;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index:99;
}
.contenedor-header header {
	max-width: 1100px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
}
.contenedor-header header .logo a{
	font-family: "Righteous";
	font-size: 36px;
	color: #1CB698;
	text-decoration: none;
}
.contenedor-header header ul{
	display: flex;
	list-style: none;
}

.contenedor-header header nav ul li a{
	text-align: none;
	color: #fff;
	margin: 0 15px;
	padding: 3px;
	transition: .5s;
	text-decoration: none;
}
.contenedor-header header nav ul li a:hover
{
	color: #33f5ff;

} 
.nav-responsive{
	background-color: #33f5ff;
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	display: none;

}


.inicio{
background:
  linear-gradient(to top, rgba(38, 35, 38, 0.8), rgba(38, 35, 38, 1)),
  url(fondo.jpg);
background-size: cover;
height: 100vh;
color: #ffffff;
display: flex;
align-items: center;
 }

 .inicio .contenido-banner{
 	padding: 20px;
 	background-color: #000000;
 	max-width: 350px;
 	margin: auto;
 	text-align: center;
 	border-radius: 40px;
 }

 .inicio .contenido-banner img{
 	margin-top:40px;
 	border: 10px solid #33f5ff;
 	display: block;
 	width: 80%;
 	margin: auto;
 	border-radius: 100%;
 }
 .inicio .contenido-banner h1{
 	margin-top: 40px;
 	font-size: 42px;
 	font-family: "Righteous";
 }
 .inicio .contenido-banner h2{
 	font-size: 15px;
 	font-weight: normal;
 }
 .inicio .contenido-banner a{
 	color: white;
 	display: inline-block;
 	text-decoration: none;
 	border:1px solid white;
 	border-radius: 100%;
 	width: 42px;
 	height: 42px;
 	line-height:42px;
 	margin: 40px 5px;
 	font-size: 20px;
 	transition: .3s;

 }
.inicio .contenido-banner a:hover{
	background-color: #33f5ff;
}


.sobremi{
	background-color: black;
	color: white;
	padding: 50px 20px;
}

.sobremi .contenido-seccion{
	max-width: 1100px;
	margin: auto;
}

.sobremi h2{
	font-size: 48px;
	font-family: "Righteous";
	text-align: center;
	padding: 20px 0;
}

.sobremi .contenido-seccion p{
	font: 18px;
	line-height: 22px;
	margin-bottom: 20px;
}
.sobremi .contenido-seccion p span{
color: #44F1FF ;
font-weight: bold;
}
.sobremi .fila{
	display: flex;
}
.sobremi .fila .col{
	width: 50%;
}
.sobremi .fila .col h3{
	font-size: 28px;
	font-family: "Righteous";
	margin-bottom: 25px;
}
.sobre .fila.col ul{
	list-style: none;
}
.sobremi .fila .col ul li{
	margin: 12px 0 ;
}
.sobremi .fila .col ul li strong{
	display: inline-block;
	color: #44F1FF;
	width: 130px;
}
.sobremi .fila .col ul li span{
	background-color: #44F1FF;
	color:white;
	padding: 3px;
	font-weight: bold;
	border-radius: 5px;
}
.sobremi .fila .col .contenedor-intereses{
	display: flex;
	flex-wrap: wrap;

}
.sobremi .fila .col .contenedor-intereses .intereses{
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 10px;
	margin: 0 15px 15px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: .3s;
}

.sobremi .fila .col .contenedor-intereses .intereses:hover{
	background-color: #44F1FF;
}
.sobremi .fila .col .contenedor-intereses .intereses i{
	font-size: 38px;
	margin-bottom: 10px;
}
.sobremi button{
	cursor: pointer;
	background-color: transparent;
	border: 2px solid white;
	width: fit-content;
	display: block;
	margin: 20px auto;
	padding: 10px 22px;
	font-size: 16px;
	color: white;
	position: relative;
	z-index: 10;
}
.sobremi button .overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color:#44F1FF ;
	z-index: -1;
	transition: 1s;
}
.sobremi button:hover .overlay{
	width: 100%;
}

.skills{
	background-color: #252A2E;
	color: white;
	padding: 50px 20px;
}

.skills .contenido-seccion{
	max-width: 1100px;
	margin: auto;
}

.skills h2{
	font-size: 48px;
	font-family: "Righteous";
	text-align: center;
	padding: 20px 0;
}

.skills .fila {
	display: flex;
}

.skills .fila .col{
	width: 50%;
	padding: 0 20px;
}

.skills .fila .col h3{
	font-size: 20px;
	font-family: "Righteous";
	margin-bottom: 25px;
}
.skills .skill > span{
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}
.skills .skill .barra-skill{
	height: 8px;
	width: 80%;
	background-color: black;
	position: relative;
	margin-bottom: 30px;
}
.skills .skill .progreso{
	background-color:#00c3ff ;
	position: absolute;
	top: 0;
	left: 0;
	height: 8px;
	
}

.skills .skill .barra-skill span{
	position: absolute;
	height: 40px;
	width: 40px;
	background-color: #44f1ff;
	border-radius: 50px;
	line-height: 40px;
	text-align: center;
	top: -17px;
	right: -15px;
	font-size: 14px;
}
.skills .skill .javascript{
	width: 0%;
	animation: 2s javascript forwards;
}
@keyframes javascript{
	0%{width: 0%;}
	100%{width: 50%;}
}
.skills .skill .html{
	width: 0%;
	animation: 2s html forwards;
}
@keyframes html{
	0%{width: 0%;}
	100%{width:75%;}
}

.skills .skill .css{
	width: 0%;
	animation: 2s css forwards;
}
@keyframes css{
	0%{width: 0%;}
	100%{width:75%;}
}


.skills .skill .sql{
	width: 0%;
	animation: 2s sql forwards;
}
@keyframes sql{
	0%{width: 0%;}
	100%{width:60%;}
}

.skills .skill .c{
	width: 0%;
	animation: 2s c forwards;
}
@keyframes c{
	0%{width: 0%;}
	100%{width:50%;}
}

.skills .skill .net{
	width: 0%;
	animation: 2s net forwards;
}
@keyframes net{
	0%{width: 0%;}
	100%{width:50%;}
}

.skills .skill .comunicacion{
	width: 0%;
	animation: 2s comunicacion forwards;
}
@keyframes comunicacion{
	0%{width: 0%;}
	100%{width:80%;}
}

.skills .skill .trabajoenequipo{
	width: 0%;
	animation: 2s trabajoenequipo forwards;
}
@keyframes trabajoenequipo{
	0%{width: 0%;}
	100%{width:90%;}
}

.skills .skill .dedicacion{
	width: 0%;
	animation: 2s dedicacion forwards;
}
@keyframes dedicacion{
	0%{width: 0%;}
	100%{width:80%;}
}

.skills .skill .autodidacta{
	width: 0%;
	animation: 2s autodidacta forwards;
}
@keyframes autodidacta{
	0%{width: 0%;}
	100%{width:90%;}
}

.skills .skill .creatividad{
	width: 0%;
	animation: 2s creatividad forwards;
}
@keyframes creatividad{
	0%{width: 0%;}
	100%{width:80%;}
}

.skills .skill .software{
	width: 0%;
	animation: 2s software forwards;
}
@keyframes software{
	0%{width: 0%;}
	100%{width:70%;}
}
.skills .skill .resolutivo{
	width: 0%;
	animation: 2s resolutivo forwards;
}
@keyframes resolutivo{
	0%{width: 0%;}
	100%{width:80%;}
}
.skills .skill .responsabilidad{
	width: 0%;
	animation: 2s responsabilidad forwards;
}
@keyframes responsabilidad{
	0%{width: 0%;}
	100%{width:100%;}
}
/*Seccion curriculum */

.curriculum { 
background:#090909;
color: white;
padding: 50px 20px;
 }

 .curriculum .contenido-seccion{
 	max-width: 1100px;
 	margin: auto;
 }
 .curriculum h2{
 	font-size: 48px;
 	font-family: "Righteous";
 	text-align: center;
 	padding: 20px 0;
 }
.curriculum .fila{
	display: flex;
	justify-content: space-between;
}

.curriculum .fila .col{
	width: 49%;
	padding: 0 20px;
}
.curriculum .fila .col h3{
	font-size: 28px;
	font-family: "Righteous";
	margin-bottom: 25px;
}
.curriculum .fila .izq{
	border-right: 2px solid black;
}
.curriculum .fila .der {
	border-left: 2px solid black;
}

.curriculum .fila .item {
	padding: 25px;
	margin-bottom: 30px;
	background-color: #1a1a1a;
	position: relative;
}
.curriculum .fila .item h4{
	font-size: 20px;
	margin-bottom: 10px;
}

.curriculum .fila .item .casa{
	color:#44d3ff;
	font-size: 22px;
	font-weight: bold;
	display: block;
}
.curriculum .fila .item .fecha{
	display: block;
	color:#44d3ff ;
	margin-bottom: 10px;
}


.curriculum .fila .izq{
	border-right: 2px solid #44d3ff;
	margin-right: 20px;
}
.curriculum .fila .der{
	border-right: 2px solid #44d3ff;
	margin-right: 20px;
}
 	.curriculum .fila .item .conectori{
 		height: 2px;
 		background-color:#44d3ff;
 		width: 47px;
 		position: absolute;
 		top: 50%;
 		right: -47px;
 		z-index: 5;
 	}

 	.curriculum .fila .item .conectori .circuloi {
 		display: block;
 		height: 10px;
 		width: 10px;
 		border-radius: 50%;
 		background-color: #44d3ff;
 		float: right;
 		position: relative;
 		bottom: 4px;
 	}

	.curriculum .fila .item .conectori{
 		height: 2px;
 		background-color:#44d3ff;
 		width: 47px;
 		position: absolute;
 		top: 50%;
 		right: -47px;
 		z-index: 5;
 	}

 	.curriculum .fila .item .conectori .circuloi {
 		display: block;
 		height: 10px;
 		width: 10px;
 		border-radius: 50%;
 		background-color: #44d3ff;
 		float: right;
 		position: relative;
 		bottom: 4px;
 	}

/* seccion contacto */
.contacto {
	background-image: url(imagencontacto.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	padding: 50px 0;
}

.contacto .contenido-seccion{
	max-width: 1100px;
	margin:auto;
}

	.contacto h2{
		font-size: 48px;
 	font-family: "Righteous";
 	text-align: center;
 	padding: 20px 0;
	}
	.contacto .fila{
		display: flex;
	}
	.contacto .col{
		width: 50%;
		padding: 10px;
		position: relative;
	}
	.contacto .col input, .contacto .col textarea{
		display: block;
		width: 100%;
		padding: 18px;
		border: none;
		margin-bottom: 20px;
		background-color:#252A2E ;
		color:white;
		font-size: 18px;
	}

	.contacto button{
	cursor: pointer;
	background-color: transparent;
	border: 2px solid white;
	width: fit-content;
	display: block;
	margin: 20px auto;
	padding: 10px 22px;
	font-size: 16px;
	color: white;
	position: relative;
	z-index: 10;
	}
	.contacto button .overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color:#44F1FF ;
		z-index: -1;
		transition: 1s;
	}
	.contacto button:hover .overlay{
		width: 100%;
	}

	.contacto .col .info{
		position: absolute;
		top:40%;
		background-color: #252A2E;
		padding: 20px;
		width: fit-content;
		left:2%;
		transform: traslate(-50%,-50%);
	}
	.contacto .col .info ul{
		list-style: none;
	}
	.contacto .col .info ul li{
		margin-bottom: 20px;
	}
	.contacto .col .info ul li i{
		color: #44F1FF;
		display: inline-block;
		margin-right: 20px;
	}
	footer{
		background-color: black;
		color: white;
		padding: 50px 0 30px 0;
		text-align: center;
		position: relative;
		width: 100%;
	}
	footer .redes{
		margin-bottom: 20px;
	}
	footer .redes a{
		color: white;
		display: inline-block;
		text-decoration: none;
		border: 1px solid white;
		border-radius: 100%;
		width: 42px;
		height: 42px;
		line-height: 42px;
		margin: 40px 5px;
		font-size: 20px;
		transition: .3s;
	}
	footer .arriba{
		display: block;
		width: 50px;
		height: 50px;
		background-color: #1CB698;
		color: white;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		top:-25px;
		border-radius: 50%;
		line-height: 50px;
		font-size: 18px;
	}
	/*seccion responsive*/
	@media screen and (max-width:980px){
		nav{
			display: none;
		}
		.nav-responsive{
			display: block;
		}
		nav.responsive{
			display: block;
			position: absolute;
			right: 0;
			top: 75px;
			background-color: black;
			width: 180px;
		}
		nav.responsive ul{
				display: block !important;
		}
		nav.responsive ul li{
			border-bottom: 1px solid white;
			padding: 10px 0 ;
		}
	}
	@media screen and (max-width:700px){
		.sobremi .fila{
			display: block;
		}
		.sobremi .fila .col{
			width: fit-content;
		}
		.skills .fila{
			display: block;
		}
		.skills .fila .col{
			width: 100%;
		}
		.skills .fila .col .barra-skill{
			width: 100%;
		}
		.curriculum .fila{
			display: block;
		}
		.curriculum .fila .col{
			width: 90%;
		}
		.curriculum .fila .derecha{
			margin-left: 20px;
		}
		.contacto .fila{
			display: block;
		}
		.contacto .fila .col{
			width: 100%;
		}
	}