/* PORTFOLI */

body.portfoli {
	background-color: #F2F2F2; /*color de fons gris clar*/
}

body.portfoli h1 {
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
	font-size: 30px; /*mida de lletra*/
	line-height: 25px; /*alçada de línia*/
	padding: 30px; /*espai interior del títol*/
	text-align: center; /*centrar el text*/
}

body.portfoli h2 {
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
	font-size: 20px; /*mida de lletra*/
	line-height: 25px; /*alçada de línia*/
}

body.portfoli div.Logo {
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
	display: flex; /*flexbox per animar els elements*/
	justify-content: space-evenly; /*espai uniforme entre els elements*/
	align-items: center; /*alineació vertical centrada*/
	padding: 30px; /*espai interior*/
}

body.portfoli div.Logo img {
	height: 150px; /*alçada de la imatge*/
}

body.portfoli div.Logo h1 {
	font-family: Noto Sans Mono,monospace; /*tipus de lletra*/
	font-size: 15px; /*mida de lletra*/
	height: 1px; /*alçada mínima*/
	
}

body.portfoli div.Portfoli {
	display: grid; /*layout en quadrícula*/
	grid-template-columns: 1fr 1fr 1fr 1fr; /*4 columnes iguals*/
	gap: 10px; /*separació entre columnes i files*/
	margin-bottom: 100px; /*marge inferior de la secció*/
	text-align: center; /*centra el text dins de cada cel·la*/
	padding: 60px; /*espai interior de la secció*/

}

body.portfoli div.imagen-contenedor {
	width: 100%; /*ocupa tot l'ample del contenedor*/
	aspect-ratio: 4/5; /*proporció de la caixa*/
	overflow: hidden; /*retalla la imatge que sobresurti*/
	border-radius: 7px; /*cantonades arrodonides*/
	
}

body.portfoli div.Portfoli img {
	width: 300px; /*ocupa tot l'ample del contenedor*/
	aspect-ratio: 4/5; /*manté la proporció*/
	border-radius: 7px; /*cantonades arrodonides*/
	width: 100%; /*amplada de la imatge*/
	transition: transform 0.5s ease; /*animació suau en hover*/
	overflow: hidden; /*evita que sobresurtin*/
	display: block;	/*elimina espais blancs sota la imatge*/
}

body.portfoli div.imagen-contenedor:hover img {
	transform: scale(1.05); /*escala la imatge un 5%*/
	z-index: 2; /*assegura que quedi davant*/
	cursor: pointer; /*canvia el cursor al passar per sobre*/
}

body.portfoli p {
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
	font-size: 15px; /*mida de lletra*/
}

body.portfoli a {
	padding: 10px; /*espai interior*/
	background-color: burlywood; /*color de fons*/
	color: black; /*color del text*/
	border-radius: 10px; /*cantonades arrodonides*/
	display: inline-block; /*comportament del bloc en línia*/
	text-decoration: none; /*sense subratllat*/
}

body.portfoli a:hover {
	background-color: #969696; /*canvi de color de fons*/
	color: white; /*color del text al hover*/
	text-decoration: underline; /*subratllat al passar el cursor*/
}

@media screen and (max-width: 768px){
	body.portfoli div.Logo {
		display:grid; /*canvia a grid*/
		grid-template-columns: 1fr; /*una columna*/
	}
}

@media screen and (max-width: 768px){
	body.portfoli div.Portfoli {
		display:grid; /*mantenim grid*/
		grid-template-columns: 1fr 1fr; /*2 columnes*/
	}
}


/* CURRICULUM */

body.cv h1 {
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
	font-size: 60px; /*mida de lletra*/
	color: black; /*color del text*/

animation-name: rainbow; /*nom de l'animació*/
animation-duration: 1s; /*durada de l'animació*/
animation-iteration-count: infinite; /*es repeteix infinitament*/
}

body.cv h2 {
	font-size: 20px; /*mida de lletra*/
	color: black; /*color del text*/
	font-family: Noto Sans Mono, monospace; /*tipus de lletra*/
}

body.cv {
	margin-bottom: 100px; /*espai inferior de tota la pàgina*/
	background-color: #F2F2F2; /*color de fons*/
	font-family: Noto Sans Mono, monospace; /*tipus de lletra general*/
}

body.cv div.dades {
	padding-left: 100px; /*espai a l'esquerra*/
	padding-right: 100px; /*espai a la dreta*/
}

body.cv div.dades p {
	padding: 10px; /*espai interior*/
	background-color: black; /*color de fons*/
	color: white; /*color del text*/
	border-radius: 10px; /*cantonades arrodonides*/
	display: inline-block; /*evita que ocupi tota la línia*/
}

body.cv div.dades a {
	padding: 10px; /*espai interior*/
	background-color: burlywood; /*color del fons*/
	color: black; /*color del text*/
	border-radius: 10px; /*cantonades arrodonides*/
	display: inline-block; /*evita que ocupi tota la línia*/
	text-decoration: none; /*sense subratllat*/
}

body.cv div.dades a:hover {
	background-color: #969696; /*color del fons*/
	color: white; /*color del text*/
	text-decoration: underline; /*subratllat al hover*/
}

body.cv section {
	padding: 100px; /*espai interior*/
}

@media screen and (min-width:768px){
	body.cv div.perfil {
	display: flex; /*utilitza flexbox*/
	gap: 180px; /*separació entre elements*/
	}
}

body.cv div.perfil {
	justify-content: space-between; /*espai uniforme entre els elements*/
	padding-right: 100px; /*marge dret*/
	padding-left: 100px; /*marge esquerre*/
	padding-top: 50px; /*marge superior */
}

body.cv div.perfil img {
	display: flex; /*flex per assegurar alineació*/
	border-radius: 10%; /*cantonades arrodonides */
	width: 150px; /*ample fix*/
	height: 150px; /*alt fix*/
	margin-bottom: 50px; /*espai inferior*/
}

body.cv img {
	object-fit: cover; /*la imatge omple el contenedor sense deformar-se*/
	transition: transform 0,3s; /*animació suau al transformar*/
	height: 100%; /*ocupa tota l'alçada del contenedor*/
}

body.cv :hover img {
	transform: scale(1.5); /*augmenta la imatge al passar el cursor*/
}

@keyframes	rainbow {
	0% {color: darkslategray;} /*color inicial*/
	25% {color: slategray;} /*color intermig*/
	75% {color: darkgray;} /*color intermig 2*/
	100% {color: black;} /*color final*/
	}
}