/*COLORES
alabaster	EAE5DB		rgba(234, 229, 219, 0.7)
jet black	383838		rgba(56, 56, 56, 0.70)
naranja		FFC37A		rgba(56, 56, 56, 1)
salmon		FF8787
*/


body{
	background-color: #383838;
	margin:auto;
	max-width: 70%;
	min-width: 350px;

	color: #EAE5DB;
}

/*body portfolio*/
	body.portfolio{
		min-height: 100vh;
		background: linear-gradient(45deg, #FFC37A, #EAE5DB, #FF8787);
		background-size: 400% 400%;
		animation: gradient 30s ease infinite;

		color: #383838;
	}

	@keyframes gradient {
	  0% {
	    background-position: 0% 50%;
	  }
	  25% {
	    background-position: 50% 50%;
	  }
	  50% {
	  	background-position: 100% 50%;
	  }
	  75% {
	  	background-position: 50% 50%;
	  }
	  100% {
	    background-position: 0% 50%;
	  }
	}

section.gensection{
	margin-bottom: 25px;
	margin-top:25px;
	padding: 50px;
	border-bottom: 1px dashed #EAE5DB ;
}

section.gensection2{
	margin-bottom: 25px;
	margin-top:25px;
	padding: 50px;
}

h1{
	font-family: "Italiana", sans-serif;
  	font-weight: 400;
 	font-style: normal;
	font-size: 14vw;
	margin: 50px;

	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

h2{
	font-family: "Italiana", sans-serif;
	font-weight: 400;
 	font-style: normal;
	font-size: clamp(1.6rem,3vw, 4rem);
}

h3{
	font-family: "Italiana", sans-serif;
	font-weight: 400;
	font-size: 3rem;
	font-size: clamp(2.2rem, 3vw, 3.1rem);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
	line-height: 1.5em;

	margin: 0 0 4rem 0;

	
}

h4{
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: clamp(1.1rem, 1.5vw, 1.7rem);
	color: #FFC37A;

	margin: 0;

	transition: color 0.3s ease;
}


h5{
	margin: 0;
	font-family: "Italiana", sans-serif;
	font-weight: 400;
 	font-style: normal;
	font-size: clamp(1.1rem,1.5vw, 1.7rem);
}

p{
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: clamp(1rem,1.2vw,1.5rem);
	line-height: 1.5em;
	margin: 0;
}


/*Barra de navegación*/

	html {
	  scroll-behavior: smooth;
	}


	header{
		position: sticky;
		top: 0;
		z-index: 1000;

		background-color: rgba(56, 56, 56, 0.70);
		border-radius: 20px;
		margin-top: 20px;
	}

	img.logo {
		width: 60px;
		margin: 0;
	}

	.navegacion{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 50px;
		padding-right: 50px;
		padding-top: 5px;
		padding-bottom: 5px;

		font-size: 1.2rem;

	}

	.botonesnav{
		display: flex;
		gap: 2rem;
		margin:0;
	}

	.nav-button{
		font-family: "Italiana", sans-serif;
		font-weight: 500;
		font-size: clamp(1rem,1.1vw,1.3rem);
		text-decoration: none;
		color: #EAE5DB;
	}


	a{
		transition: color 0.3s ease;
	}

	a:hover{
		color: #FFC37A;
	}

	/*Responsive header - Phone and table*/
	@media (max-width:768px) {
		.botonesnav{
			flex-direction: column;
			align-items: center;
			gap: 5px;
		}
	}


	/*Portfolio page*/

	body.portfolio header{
		background-color: rgba(234, 229, 219, 0.7);
	}

	body.portfolio .nav-button{
		color: #383838;
	}

	body.portfolio a{
		transition: color 0.3s ease;
	}
	
	body.portfolio a:hover{
		color: #FF8787;
	}



/*Landing page*/

	.landingpage{
		display: flex;
		justify-content: center;
		align-items: center;

		height:90vh;

		position: relative;
	}


	img.imagel{
		height: 85vh;
		width: 50vw;
		border-radius: 20px;
		object-fit: cover;
		object-position: center;

		position: absolute;
		right: 50px;
		z-index: 2;
	}



	.landingpage h2{
		margin: 50px;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 3;
	}

	h1.textstroke {
	  position: absolute;
	  left: 0;
	  top: 0;
	  color: transparent;
	  -webkit-text-stroke: 2px #EAE5DB;
	  z-index: 3;
	}

	@media (max-width: 785px){
		.landingpage{
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			position: relative;
		}

		.imagel{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}

		.landingpage h2{
			position: absolute;
			left: 50%;
			bottom: 10%;
			transform: translateX(-50%);
			z-index: 3;

			margin: 0;
		}

		h1, h1.textstroke{
			position: absolute;
			left: 50%;
			top: 10%;
			transform: translateX(-50%);
			padding-left: 0;
			text-align: center;
			margin: 0;
		}
		
		h1.textstroke {
			z-index: 3;
  		}

	}



/*Intro/Description*/

	.intro{
		padding-left: 50px;
		padding-right: 50px;
		padding-top: 100px;
		padding-bottom: 50px;

		font-size: clamp(1.1rem,1.5vw, 1.5rem);;
		border-bottom: 1px dashed #EAE5DB ;

		display: flex;
		flex-direction: column;
	}


	.intro h2{
		margin: 0 0 4rem 0;
	}


	.intro p{
		width: 50vw;
		margin-bottom: 1em;
	}


	.intro em{
		font-style: italic;
		color: #FFC37A;
	}

	.intro div.hi{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}


	#introcontainer2{
		align-self: flex-end;
	}



/*EDUCACIÓN*/


	.educon{
		display: grid;
		margin: 0 0 40px 0;
		grid-template-columns: 60% 40%;;
	}

	.educon:hover h4 {
		color: #FF8787;
	}

	@media (max-width: 768px){
		.educon{
			display: flex;
			flex-direction: column;
		}

		.educon .right{
			align-items: flex-start;
		}
	}



/*JOB EXPERIENCE*/


	.jobexpcon{
		display: grid;
		margin: 0 0 40PX 0;
		grid-template-columns: 70% 30%;
	}

	.jobexpcon:hover h4 {
		color: #FF8787;
	}

	ul.jobs{
	list-style-type: disc;
	margin-left: 1vw;

	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: clamp(0.9rem,1.3vw,1.5rem);
	line-height: 1.5em;
	}





/*COLLAB EXPO*/

	.collabcon{
		display: grid;
		margin: 0 0 40PX 0;
		grid-template-columns: 60% 40%;
	}

	p.typeproject{
		font-weight: 350;
	}

	.collabcon:hover h4 {
		color: #FF8787;
	}

	@media (max-width: 785px){

		.collabcon{
			display: flex;
			flex-direction: column;
		}

		.collabcon .left{
			margin-bottom: 5px;
		}

		.collabcon .right{
			align-items: flex-start;
		}

		.collabcon .location{
			text-align: left;
		}

		.collabcon .year{
			text-align: left;
		}
	}



/*LANGUAGES*/

	.language-skills{  					/*Contenedor de languages y soft skills para que este en la misma linea*/
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px dashed #EAE5DB;
	}

		.langcon{
			display: flex;
			flex-direction: column;
			margin: 0 0 40px 0;
		}

		.langcon h4{
			color: #EAE5DB;
			margin-top: 20px;
		}

		.langcon:hover h4 {
			color: #FF8787;
		}

		.progressbar{
			width: 30vw;
			height: 7px;
			border-radius: 5px;

			background-color: #eae5db;
			margin-top: 10px;
		}

		#spanishbar{
			width: 100%;
			height: 7px;
			border-radius: 5px;
			background-color: #FFC37A;
		}

		#catalanbar{
			width: 100%;
			height: 7px;
			border-radius: 5px;
			background-color: #FFC37A;
		}

		#englishbar{
			width: 95%;
			height: 7px;
			border-radius: 5px;
			background-color: #FFC37A;
		}

		#filipinobar{
			width: 25%;
			height: 7px;
			border-radius: 5px;
			background-color: #FFC37A;
		}

	@media (max-width: 768px){
		.language-skills{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		#skills{
			border-top: 1px dashed #EAE5DB;
		}

		.progressbar{
			width: 50vw;
		}
	}



/*SKILLS*/

	h3.skills{
		text-align: right;
	}

	p.skillcon{
		width: auto;

		font-size: clamp(1rem, 1.5vw, 1.7rem);
		line-height: 1.5em;
		text-align: right;
	}

	p.skillcon strong{
		color:#FFC37A ;
	}

	@media (max-width: 768px){
		p.skillcon{
			text-align: left;
		}

		h3.skills{
		text-align: left;
	}
	}

	/*PORTFOLIO*/

	.projects{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 25px;
		align-items: start;
	}

	.projectbox{
		display: flex;
		flex-direction: column;
		margin-bottom: 40px;
		justify-content: flex-start;
	}

	.projectbox iframe {
		width: 100%;
		aspect-ratio: 16/9 ;
		border: none;
		display: block;
		border-radius: 10px;
		margin-bottom: 1.5rem;
	}

	.projectbox h2{
		transition: color 0.3s ease;
	}

	.projectbox:hover h2{
		color: #FF8787;
	}

	@media (max-width: 785px){
		.projects{
		display: flex;
		flex-direction: column;
		}
	}




/*FOOTER*/

	footer {
		padding: 50px;
		margin-bottom: 50px;
		border-top-left-radius: 20px;
		border-bottom-right-radius: 20px;


		background-image: linear-gradient(rgba(0, 0, 0, 0.4)), url("../img/contact me.jpg");
		background-size: cover;
		background-position: center;
	}

	.grid-footer{
		font-family: "Oswald", sans-serif;
		font-weight: 300;
		font-size: clamp(1rem,1.2vw,1.5rem);

		display: grid;
		grid-template-columns: 10% auto 30%;
		gap: 5px;
		align-items: flex-end;

		margin-top: 25px;
	}

	ul.footer{
		list-style: none;
		padding:0;
		margin: 0;
	}

	footer strong{
		color: #FFC37A;
	}

	footer p{
		text-align: right;
	}

	@media (max-width:785px){ 
		.grid-footer{
			grid-template-columns: auto auto ;
			row-gap: 20px;
		}

		footer p{
			text-align: left;
		}
	}

	footer.portfolio{
		padding: 50px;
		margin-bottom: 50px;
		border-top-left-radius: 20px;
		border-bottom-right-radius: 20px;

		background-image: none;
		background-color: rgba(255, 135, 135, 0.2);
		background-size: cover;
		background-position: center;
	}

	footer.portfolio strong{
		color: #FF8787;
	}


/*Estilos Comunes en secciones*/

ul.grid-ul{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 10px;

	list-style: none;
	padding:0;
	margin: 0;

	font-family: "Oswald", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.2rem, 1.5vw, 1.7rem);
} /*Grid responsive para las listas*/

div.left{
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	grid-column-start:1 ;
	grid-column-end:2 ;
} /*flexbox lado izquierdo*/

div.right{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;

	grid-column-start:2 ;
	grid-column-end:3 ;
} /*flexbox lado derecho*/

.location{
	font-size: clamp(0.8rem, 1.2vw, 1.3rem);
	font-weight: 200;
	margin: 0;

	text-align: right;
} /*estilo texto del localizacion*/

.year{
	font-size: clamp(0.7rem, 1vw, 1.1rem);
	font-weight: 200;
	margin: 0;

	text-align: right;
} /*estilo texto del periodo*/