body {
	background-color: #FFFFFF;
	max-width: 1280px;
	margin: auto;
	padding: 15px;
	line-height: 180%;
	background: radial-gradient(white 85%, darkred);
	background-size: 100vw 100vh;
	background-attachment: fixed;
}

/*aquí comentari o algo así */

div.header {
	display: flex;
	justify-content: space-evenly;
	position: sticky;
	top: 0px;
	margin: 0px;
	z-index: 10;
	background: linear-gradient(to bottom, #FFFFFF1A, #FFFFFF80);
	font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  border-bottom: solid;
  border-bottom-color: darkred;
}

h1 {
	font-family: "Instrument Serif", serif;
 	font-weight: 400;
  font-style: normal;
  font-size: 5em;
  text-align: center;
  color: darkred;
  line-height: 100%;
}

div.portinici {
  	display: flex;
  	justify-content: space-between;
  }

h2 {
	color: darkred;
	font-family: "DM Sans", sans-serif;
  	font-size: 1em;
  	font-style: italic;
  	font-weight: normal;
}

p {
	color: darkred;
	font-family: "DM Sans", sans-serif;
  font-size: 1em;
  font-style: normal;
  line-height: 120%;
}

h3 {
	font-family: "Instrument Serif", serif;
  	font-style: normal;
  	font-size: 1.5em;
  	font-weight: normal;
  	color: darkred;
  	border: solid;
  	border-radius: 34px;
  	display: inline-flex;
  	padding-left: 30px;
  	padding-right: 30px;
  	animation: translate;
  	animation-duration: 5s;
	transition: 0.4s;
	animation-timing-function: linear;
}

div.portfoli {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	text-align: center;
}

div.portfoli img {
	width: 100%;
	transition: 0.5s;
}

img {
	border-radius: 34px;
}

div.portfoli img:hover {
	cursor: pointer;
	transform: scale(105%);
}

h3:hover {
	cursor: pointer;
	transform: translate(5px,5px);
}

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


div.presentacio img {
	width: 100%;
}

div.presentacio {
 	display: grid;
 	grid-template-columns: 20% 80%;
 	align-items: center;
 	justify-items: space-evenly;
 	gap: 30px;
}

h4 {
	font-family: "Instrument Serif", serif;
 	font-weight: normal;
  font-style: normal;
  font-size: 5em;
  text-align: left;
  color: darkred;
  position: relative;
  line-height: 100%;
}


div.curriculum {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	text-align: center;
}

div.item {
	border: solid;
	border-color: darkred;
	border-radius: 34px;
}

h5 {
	color: white;
	font-family: "Instrument Serif", serif;
  font-style: normal;
  font-size: 1.5em;
  font-weight: normal;
  color: darkred;
  border: solid;
  border-radius: 34px;
  display: inline-flex;
 	padding-left: 20px;
  padding-right: 20px;
}

ul {
	color: darkred;
	font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
 	font-style: normal;
 	text-align: left;
}

div.abaix {
	text-align: center;
	border-top: solid;
  border-top-color: darkred;
  
}

div.fotoyo {
	animation: bounce;
	animation-duration: 2s;
	}

@keyframes bounce {
	0% {
		transform: translate(0px,0px);
	}
	5% {
		transform: translate(0px,-5px);
	}
	25% {
		transform: translate(0px,-20px);
	}
	100% {
		transform: translate(0px,0px);
	}
}


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