@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap');

/* General Styles */

*{	
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
	outline: 0;
  	border: 0;
  	padding: 0;
}

:root{
	--color-white: #fff;
	--color-orange1: #F58C44;
	--color-orange2: #F0720F;
	--color-black: #000;
	--color-violet1: #7A28EB;
	--color-violet2: #5806B9;
	--color-white2: #ECE4E0;
	--color-white3: #A9A0b0;
	--transition: all 0.3s ease;
}

html{
	font-size: 15px;
	scroll-behavior: smooth; 
	/*el scroll se desplaza lentamente*/
}

body{
	background-color: var();
	font-family: 'Poppins', sans-serif;
	color: var();
	max-width: 100vw;
}

h1,h2,h3,h4,h5 {
	line-height: 1.2; /*  distancia entre líneas de texto, aunque cambia segun la caja contenedora */
	color: var();
}

h1{
	font-size: 3.8rem;
}

h2{
	font-size: 2.6rem;
}


h3{
	font-size: 1.6rem;
}


h4{
	font-size: 1.2rem;
	font-weight: 400;
}


h5{
	font-size: 0.86rem;
}

p{
	line-height: 1.8;
}

a{
	text-decoration: none;
}

.container{
	width: 90%;
	margin: 0 auto; /* Centra horizonalmente */
	padding: 100px 0;
	overflow: hidden;
}

img{
	width: 100%;
}

.btn{
	padding: 1.4rem 3.4rem;
	font-size: 1.1rem;
	display: inline-block;
	margin: 2rem 0;
	transition: var(--transition);
	cursor: pointer;
}

.btn:hover{
	box-shadow: 0 2rem solid var(--color-black);
}

/*nav*/
#check{
	display: none;
}

.hero{
	position: fixed;
	background-color: var(--color-white);
	width: 100%;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	border-bottom: 1px solid blueviolet;
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
	z-index: 101;
}

.nav{
	/*el width lo tiene la clase container*/
	background-color: var(--color-white);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%; /* el 100% es 5rem */
	padding: 0;

}

.nav__responsive{
	display: none;
}

.nav__logo h1{
	color: blueviolet;
	font-size: 2rem;
}

.nav__links{
	display: flex;
	height: 100%;
	/*justify-content: center;
	align-items: center;
	gap: 2em;
	padding: 0 30px;*/
}


.nav__link{
	display: flex;
	height: 100%;
	width: 7rem;
	justify-content: center;
	align-items: center;
	position: relative;
	color: var(--color-black);
	transition: var(--transition);
}

.nav__link:hover{
	color: var(--color-white);
	background-color: var(--color-orange1);
	border-bottom: 10px solid var(--color-orange2) ;
}

.active{
	color: var(--color-white);
	background-color: var(--color-orange1);
	border-bottom: 10px solid var(--color-orange2);
}

.btn__menu{
	display: none;
	font-size: 30px;
	cursor: pointer;
	transition: var(--transition);
	align-items: center;
	text-align: center;
}

.btn__menu:hover{
	color: var(--color-orange2);

}

.btn__closeMenu{
	display: none;
}

/*main*/

.main{
	width: 100%;
}

.home{
	display: grid;
	place-items: center;
	position: relative;
	grid-template-columns: auto  25rem;
	gap: 3rem;
	padding: 200px 100px;
}

.home__text{
	display: grid;
	gap: 2em;
}

.title__home{
	display: flex;
	padding: 5px 0;
	border-bottom: 1px solid blueviolet;
}


.img__box{
	width: 20rem;
	height: 20rem;
	border: 2px solid blueviolet;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img__perfil{
	width: 18rem;
	height: 18rem;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	border: 1px solid blueviolet;
}

.button__pdf{
	width: 13rem;
}

.download__pdf{
	display: flex;
	justify-content: space-between;
	background-color: blueviolet;
	padding: 13px;
	color: var(--color-white);
	cursor: pointer;
	transition: var(--transition);
	align-items: center;
}

.download__pdf:hover{
	background-color: rgb(102, 31, 168);
	color: var(--color-white);	
}

.icon__proyects{
	display: flex;
	
}

.redes_home{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	font-size: 35px;
}

.link{
	color: var(--color-white3);
	padding: 0 1rem;
}

/*ABOUT*/



.about{
	background-color: var(--color-white2);
	color: var(--color-black);
}

.about__container{
	display: grid;
	grid-template-columns: 26rem auto;
	gap: 5rem;
}

.img__perfil__about{
	object-fit: cover;
}

.about__description .download__pdf{
	background-color: var(--color-violet1);
}

.about__description .download__pdf:hover{
	background-color: var(--color-violet2);
}


.about__text{
	margin-bottom: 1rem;
	color: var(--color-violet2);
}

.about__paragraph{
	margin-bottom: 1rem;
}


/*SKILLS*/
.skills__developer{
	display: grid;
	width: 90%;
	margin: 0 auto;
	gap: 1em;
	overflow: hidden;
	padding-top: 80px;
	grid-template-columns: 1fr 1fr 1fr;

}

.skill{
	display: grid;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.skills__title{
	align-items: center;
	text-align: center;
	color: var(--color-violet2);
}


.skills__developer img{
	width: 10rem;
	height: 10rem;
	object-fit: cover;
}

/*-----------------cONTACT me---------------------*/

.contact__me{
	background: url("../img/fondito.jpg") no-repeat center center/cover;
	padding: 7rem 0;
	max-width: 100vw;
}

.contact__me__container{
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	padding: 10rem 0 7rem;
}

.section_title{
	align-items: center;
	text-align: center;
	color: var(--color-white);
}

.contact__me__form{
	width: 50%;
	margin: 0 auto;
	margin-top: 3rem;
}

.button__submit{
	/*width: 20rem;*/
	margin: 0 auto;
	cursor: pointer;
	transition: var(--transition);
}

.button__submit:hover{
	background-color: var(--color-violet1);
	color: var(--color-white);
}

input, textarea{
	display: block;
	width: 100%;
	margin: 0.5rem 0;
	padding: 1.6rem;
	border: 1px solid var(--color-violet1);
	background: transparent;
	color: var(--color-white);
	transition: var(--transition);
}

textarea{
	height: 10rem;
}

input:focus{
	background-color: var(--color-white);
	color: var(--color-black);
}
textarea:focus{
	background-color: var(--color-white);
	color: var(--color-black);
}
input::placeholder{
	color: var(--color-white);
}
textarea::placeholder{
	color: var(--color-white);
}

/*-------------------------SERVICES-------------------------------------------*/

/*.services{
	justify-content: center;
}

.services__container{
	display: grid;
	gap: 2em;
}

.service{
	
}
*/
/*---------------------PORTAFOLIO-------------------*/

.portafolio{
	text-align: center;
	align-items: center;
}

.portafolio__title{
	display: block;
	color: var(--color-violet2);
}

.portafolio__Description{
	display: block;
	padding: 10px;
}

.portafolio__container{
	padding: 0 100px;
	display: flex;
	flex-direction: column;
}

.proyect{
	position: relative;
	display: grid;
	grid-template-columns: 50% 50%;
	margin: 5rem 0 ;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

}

.proyect:hover .face1{
	padding: 1rem;


}

.title__proyect{
	padding: 5px 0;
	border-bottom: 1px solid var(--color-violet1);
}

.face{
	padding: 2rem;
	transition: var(--transition);

}

.face1{
	background: var(--color-violet2);
}
.face1 .title__proyect{
	display: none;
}


.face__container{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	justify-content: center;
}

.proyect__Description{
	margin: 20px 0;
}

.proyect__links a{
	padding: 5px;
	color: var(--color-black);
	border: 1px solid var(--color-black);
	transition: var(--transition);
}

.proyect__links a:hover{
	color: var(--color-white2);
	background-color: var(--color-black);
}

.lenguajes{
	display: flex;
	padding-top: 10px;
	justify-content: center;
	text-align: center;
	align-items: center;

}

.lenguajes h5{
	margin: 0 10px;
	padding: 0 10px;
	border: 1px solid var(--color-black);
	cursor: pointer;
	transition: var(--transition);
}


.lenguajes h5:hover{
	opacity: 0.5;
}






/*-----------------FOOTER------------------------*/

.footer{
	background-color: blueviolet;
}

.footer__container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-content: space-between;
}

.footer__logo h1{
	color: var(--color-white);
	font-size: 2rem;
}

.footer__links{
	display: flex;
	column-gap: 2rem;
	}


.footer__link{
	display: flex;
	height: 100%;
	width: 6rem;
	justify-content: center;
	align-items: center;
	position: relative;
	color: var(--color-white);
	transition: var(--transition);
	font-size: 1rem;

}

.footer__link:hover{
	border-bottom: 10px solid var(--color-white) ;
}

.copyright{
	display: flex;
	justify-content: space-between;
	color: var(--color-white);
	align-items: center;
	text-align: center;
	padding: 2rem;
	background-color: rgb(129, 35, 216);
}

.redes_footer{
	display: flex;
	font-size: 2.0rem;
	text-align: center;

}

.redes_footer a{
	color: var(--color-black);
}



/* responsive */

@media(max-width: 1050px){
	.title__home{
		flex-direction: column;
	}

	.title__h{
		text-align: center;
		padding-bottom: 5px;
		font-size: 1.8rem;
	}
	.redes_home{
		font-size: 1.3rem;
	}
}

@media(max-width: 920px){
	/*HEADER*/
	.nav__links{
		display: none;
	}
	.btn__menu{
		display: block;
	}
	.btn__closeMenu{
		display: block;
	}

	.nav__responsive{
		display: block;
		position: fixed;
		width: 40%;
		height: 100vh;
		background-color: var(--color-white2);
		box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
		top: 0;
		right: -100%;
		padding: 100px 0px ;
		z-index: 100;
		transition: var(--transition);
	}

	.nav__links__responsive{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}


	.nav__items_r{
		padding: 1rem;
	}

	.nav__link_r{
		display: flex;
		height: 100%;
		width: 7rem;
		justify-content: center;
		align-items: center;
		position: relative;
		color: var(--color-black);
		transition: var(--transition);
	}

	.nav__link_r:hover{
		color: var(--color-orange1);
		border-radius: 50%;
		border-bottom: 5px solid var(--color-orange2);
	}

	.btn__closeMenu{
		text-align: center;
		background-color: var(--color-white2);
		color: var(--color-black);
		font-size: 2.1rem;
	}

	.btn__closeMenu:hover{
		color: var(--color-orange2);
	}

	#check:checked ~ .nav__responsive{
		right: 0;
	}

	/*HOME*/

	.home{
		grid-template-columns: 1fr;
		padding: 150px 50px;
		row-gap: 6rem;
		text-align: center;
	}

	.button__pdf{
		display: inline-block;
		margin: 0 auto;
	}

	.redes_home{
		display: none;
	}

	.title__home{
		justify-content: center;
	}

	/*ABOUT*/

	.about__container{
		grid-template-columns: 1fr;
		gap: 1rem;
		text-align: center;
	}

	.about__img img{
		width: 60%;
	}

	/*SKILLS*/

	.skills__developer{
		grid-template-columns: 1fr 1fr;
	}

	/*Portafolio*/

.portafolio{
	text-align: center;
}

.portafolio__title{
	display: block;
	text-align: center;
	align-items: center;
	color: var(--color-violet2);
}

.portafolio__Description{
	display: block;
	text-align: center;
	align-items: center;
	padding: 10px;
}


.portafolio__container{
	padding: 0 100px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	text-align: center;
	justify-content: center;
}

.proyect{
	position: relative;
	cursor: pointer;
	width: 400px;
	height: 300px;
	margin: 0;
	display: block;
	box-shadow: none;
	margin: 0 auto;
	margin-bottom: 300px;
	
}

.first__proyect{
	margin-top: 100px;
}

.final__proyect{
	margin-bottom: 350px;
}


.face{
	width: 400px;
	height: 300px;
	transition: var(--transition);
	padding: 0;
}

.face1{
	position: relative;
	background-color: #555;
	display: flex;
	justify-content: center;
	align-items: center;
	/*transform: translateY(100px);*/
	background-color: none;
	z-index: 100;
}

.proyect:hover .face1 {
	background: var(--color-violet2);
	/*transform: translateY(0);*/
}

.face1 .face__container{
	opacity: 0.2;
	transition: var(--transition);
}

.proyect:hover .face1 .face__container{
	opacity: 1;
}

.face1 .face__container img{
	max-width: 100px;
}

.face1 .title__proyect{
	display: block;
	margin: 10px 0 0;
	padding: 0;
	color: var(--color-white);
	text-align: center;
}

.face2{
	position: relative;
	background: var(--color-white2);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	/*box-sizing: border-box;*/
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
	transform: translateY(-200px);
	z-index: 99;

}

.proyect:hover .face2{
	transform: translateY(0);
}

.face2 .face__container .title__proyect{
	color: var(--color-black);
}

.face2 .face__container p{
	margin: 0;
	padding: 0;
}

.face2 .face__container .proyect__links a{
	margin: 15px 0 0;
	display: inline-block;
	text-decoration: none;
	font-weight: 900;
	color: #333;
	padding: 5px;
	border: 1px solid #333;

}

.face2 .title__proyect{
	margin: 10px 0 0;
	padding: 0;
	color: var(--color-white);
	text-align: center;
}

/*footer*/

.footer__links{
	flex-direction: column;
}

.footer__link:hover{
	border-bottom: none;
	color: var(--color-black);
}


}

@media(max-width: 450px){

/*NAV*/

.nav__responsive{
	width: 100%;
}

/*HOME*/

.home{
	padding: 100px 0;
}

.title__home{
	font-size: 2.0rem;
}

.description__home{
	font-size: 1.0rem;
}

.img__box{
	width: 15rem;
	height: 15rem;
	border: 2px solid blueviolet;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img__perfil{
	width: 13rem;
	height: 13rem;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	border: 1px solid blueviolet;
}

/*SKILLS*/
.skills__developer{
	grid-template-columns: 1fr;

}

.skills__developer img{
	width: 7rem;
	height: 7rem;
}

/*PORTAFOLIO*/

.proyect{
	position: relative;
	cursor: pointer;
	width: 300px;
	height: 200px;
	margin: 0;
	display: block;
	box-shadow: none;
	margin: 0 auto;
	margin-bottom: 300px;
	
}

.first__proyect{
	margin-top: 100px;
}

.final__proyect{
	margin-bottom: 350px;
}

.title__proyect{
	font-size: 1.2rem;
}
.lenguajes h5{
	font-size: 0.6rem;
}

.proyect__links{
	font-size: 0.6rem;
}

.proyect__Description{
	font-size: 0.8rem;
}

.face{
	width: 300px;
	height: 200px;
	transition: var(--transition);
	padding: 0;
}

.face__container{
	font-size: 0.5rem;
}

}