/*Elements bàsics*/

body, html {
  margin: 0;
  padding: 0;
}

h1 {
	color: rgb(117, 2, 120);
	font-size: 45px;
	text-align: center;
	font-family: "Playfair Display", serif;
}

h2 {
	color: rgb(117, 2, 120);
	font-size: 23px;
	font-style: italic;
	border-bottom:1.5px solid rgb(117, 2, 120);
	font-family: "Playfair Display", serif;
}

h3 {
	font-family: "Roboto", sans-serif;
	color: grey; 
	font-size: 16px;
	font-weight: 300;
	margin-bottom: 8px;
}

p, ul {
	font-family: "Roboto", sans-serif;
}

table {
	font-family: "Roboto", sans-serif;
	border-collapse: collapse;
	border: 1px solid rgb(117, 2, 120);
}

td {
  padding: 5px;
  border: 1px solid rgb(117, 2, 120);
}

a {
  color: black;
  text-decoration: none;
  transition: color 0.3s; 
}

a:hover {
  color: grey;
}

/*Estructura principal: Footer i Header*/

div.header	{
	display: flex;
	justify-content: space-between;
	margin-left: 20px;
	margin-right: 20px;
}

div.footer {
	background-color:rgb(117, 2, 120);
	margin:20px;
	padding-top: 40px;
	padding-bottom: 30px;
	border-radius: 20px;
	text-align: center;
}

div.infofooter {
	gap: 20px;
	margin: 5px;       
 }

div.infofooter img {           
	width: 70%;
	height: 70%;
}

div.textfooter {
	margin-bottom: 20px;  
	margin-top: 30px;    
}

div.footer h2 {
		color: white;
}

div.footer p {
		color: white;
}

div.footer a {
  color: white;
  text-decoration: none;
  transition: color 0.3s; 
}

div.footer a:hover {
  color: grey;
}

/*Seccions específiques: Index*/

div.intro {
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 10px;
	margin-bottom:200px;
}
	
div.intro h1 {
	animation-name: colors;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

div.portada {
  background-image:url("fons.jpg");
  background-size: cover;
  background-position:center center;
}

/*Seccions específiques: Portfoli*/

div.portfolio img {
	width: 100%;
	transition: 0.5s;
	display: block;
}

div.portfolio img:hover {
	filter: blur(5px);
	transform: scale(1.01);
}

div.portfolio {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 20px;
	margin-bottom: 50px;
}

/*Seccions específiques: CV*/

div.apartatcv {
	margin-left: 50px;
	margin-right: 50px;
}

div.info {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 5px;       
 }
                             
div.info img {           
	width: 40%;
	height: 40%;
}

/*Animacions: Index*/
@keyframes colors {
0% {color:rgb(224, 85, 228)}
10% {color:rgb(196, 6, 202)}
20% {color:rgb(150, 6, 156)}
30% {color:rgb(117, 2, 120)}
40% {color:rgb(76, 18, 77)}
50% {color:rgb(53, 0, 56)}
60% {color:rgb(76, 18, 77)}
70% {color:rgb(117, 2, 120)}
80% {color:rgb(150, 6, 156)}
90% {color:rgb(196, 6, 202)}
100% {color:rgb(224, 85, 228)}
}

/*Animacions: CV*/
.anim1:hover {
	animation-name: bounce;
	animation-duration: 2s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.3, 0.12, 1, 1);
}

.anim2:hover {
	animation-name: rotate1;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.3, 0.12, 1, 1);
}

.anim3:hover {
	animation-name: scale;
	animation-duration: 2s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.3, 0.12, 1, 1);
}

.anim4:hover {
	animation-name: rotate2;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.3, 0.12, 1, 1);
}

.anim5:hover {
	animation-name: rotate3;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.3, 0.12, 1, 1);
}

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

@keyframes rotate1{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(20deg);
	}
}


@keyframes scale{
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(1.1);
	}
} 

@keyframes rotate2{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-20deg);
	}
}

@keyframes rotate3{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

/*Media queries: vista pantalla gran*/

@media screen and (min-width: 768px) {
	h1 {
		font-size: 70px;
	}
	div.portfolio {          
		grid-template-columns: 1fr 1fr 1fr;
			}
                                                    
	div.apartatcv {                  
		margin-left: 220px;
		margin-right: 220px;
	}
	div.footer {
		padding-left: 120px;
		padding-right: 120px;
		padding-top: 30px;
		padding-bottom: 30px;
		text-align: left;
	}
	div.infofooter {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 5px;  
  }

  div.infofooter img {           
	width: 40%;
	height: 40%;
	}

	div.intro {
		margin-left: 90px;
		margin-right: 90px;
		margin-top: 200px;
	}
}