body {
	max-width: 1280px;
	margin: auto;
	padding: 20px;
	background-image: linear-gradient(145deg, ivory, moccasin, tan);
	background-size: 100vw, 100vh;
}

/*ANIMACIONS*/
	@keyframes degradat {
	0% {
		background-position: 0% center;
	}
	33% {
		background-position: 133% center;
	}
	66% {
		background-position: 266% center;
	}
	100% {
		background-position: 400% center;
	}
}

/*ESTIL BARRA NAVEGACIÓ*/
	.topnav {
	display: flex;
	gap: 20px;
	justify-content: space-around;
    align-items: center;
    a {
    	color: saddlebrown;
    	font-family: "Space Grotesk", sans-serif;
  		font-weight: 500;
  		font-style: normal;
  		font-size: 14px;
  		text-decoration: none;
    }

    a:hover {
    	color: #660000;
    	transition: 0,5s;
    }

    p {
    	color: saddlebrown;
    	font-family: "Space Grotesk", sans-serif;
  		font-weight: 500;
  		font-style: normal;
  		font-size: 14px;
    }
}

/*ESTIL CURRÍCULUM/GENERAL*/
	.cv {
		display: flex;
		align-items: center;
		flex-direction: column;
		img {
		max-width: 250px;
		min-width: 100px;
		max-height: 250px;
		min-height: 100px;
		border-radius: 10px;
		margin: 20px;
		box-shadow: 3px 3px 5px 0 saddlebrown;
		border: 3px solid saddlebrown;
		}

		@media screen and (min-width: 1024px) {
			.cv-item {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				max-width: 800px;
				gap: 75px;
			}
			h1 {
				font-size: 80px;
			}
		}
	}

	.cv-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(155, 120, 75, 0.97);
		padding: 20px;
		border-radius: 15px;
		width: 75vw;
		max-width: 450px;
		margin-bottom: 75px;
	}
	.cv-item:hover {
		background-color: rgba(155, 120, 75, 1);
	}

	.item-a {
		transform: rotate(3deg);
		transition: 0.2s;
		transition-timing-function: ease-in-and-out;
		row-gap: 50px;
	}
	.item-a:hover {
		transform: rotate(0deg);
		transition: 0.2s, ease-in-and-out;
	}

	.item-b {
		transform: rotate(-3deg);
		transition: 0.2s;
		transition-timing-function: ease-in-and-out;
	}
	.item-b:hover {
		transform: rotate(0deg);
		transition: 0.2s;
		transition-timing-function: ease-in-and-out;
	}

	p {
		color: #432109;
		font-family: "Space Grotesk", sans-serif;
	  	font-weight: 500;
	  	font-size: 20px;
	  	line-height: 21px;
	  	text-align: left;
	}

	li {
		color: #432109;
		font-family: "Space Grotesk", sans-serif;
	  	font-weight: 400;
	  	font-size: 18px;
	  	line-height: 19px;
	  	text-align: left;
	  	list-style-type: circle;
	  	margin-left: -22px;
	}

	td, th {
		color: #432109;
		font-family: "Space Grotesk", sans-serif;
	  	font-weight: 400;
	  	font-size: 18px;
	  	line-height: 19px;
	  	text-align: left;
	  	padding: 6px;
	  	border-bottom: 1px solid saddlebrown;
	}

	h1 {
		color: saddlebrown;
		font-family: "Bricolage Grotesque", sans-serif;
	  	font-weight: 650;
	  	font-size: 60px;
	  	letter-spacing: -1px;
	  	margin: 0px;
	  	text-align: center;
		}

	h2 {
		color: #432109;
		font-family: "Space Grotesk", sans-serif;
	  	font-weight: 700;
	  	font-size: 32px;
		line-height: 25px;
		text-align: left;
	}

	h4 {
		color: #4D0000;
		font-family: "Space Grotesk", sans-serif;
	  	font-weight: 500;
	  	font-size: 25px;
	  	line-height: 26px;
	  	letter-spacing: -1px;
		text-align: center;
		position: sticky;
		top: 30px;
		max-width: 700px;
		z-index: -9;
	}

/*NOM FIXED BOTTOM*/
	h3 {
		font-family: "Bricolage Grotesque", sans-serif;
	  	font-weight: 700;
	  	font-size: 18vw;
	  	letter-spacing: -2px;
	  	position: fixed;
	  	bottom: 0;
	  	margin: 5% auto;
		left: 0;
		right: 0;
	  	padding: 0;
	  	text-align: center;
	  	line-height: 18vw;
	  	z-index: -10;
	  	transform: translateY(20px);

	  	color: transparent;
		background-image: linear-gradient(to right, gold, orange, darkorange, chocolate, darkorange, orange, gold);
	    -webkit-background-clip: text;
	  	background-size: 400% auto;
	  	animation-name: degradat;
	  	animation-duration: 10s;
	  	animation-iteration-count: infinite;
	  	animation-timing-function: linear;
	  	display: inline-block;
	}

/*ESTIL PORTFOLI*/
	.portfoli {

		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		row-gap: 40px;
		align-items: center;

		h2 {
			color: #FFFACD;
			font-family: "Space Grotesk", sans-serif;
	  		font-weight: 600;
	  		font-size: 24px;
			line-height: 20px;
		}

		p {
			color: #FFFAFA;
			font-family: "Space Grotesk", sans-serif;
	  		font-weight: 400;
	  		font-size: 14px;
	  		line-height: 15px;
		}

		.portfoli img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
			filter: opacity(30%);
			transition: 0.2s, ease-in-and-out;
		}

		.portfoli img:hover {
			filter: opacity(100%);
		}

		.item {
			background-color: rgba(155, 120, 75, 0.97);
			padding: 15px;
			border-radius: 15px;
		}

	/*CONTROLS RESPONSIVE PORTFOLI*/
		@media screen and (min-width: 768px) {
			.portfoli{
				grid-template-columns: 1fr 1fr;
				align-items: center;
			}
		}
			@media screen and (min-width: 1024px) {
			.portfoli{
				grid-template-columns: 1fr 1fr 1fr 1fr;
				align-items: center;
			}
		}
		@media screen and (min-width: 1024px) {
			h4 {
				max-width: 1000px;
			}
		}
	}