/*Cos compartit CV i portfolio*/ 
body {
  font-family: "Montserrat", sans-serif;   /* igual per a tot el projecte */
  background-image: url(https://images.unsplash.com/photo-1586076100131-32505c71d0d2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687);
  background-size: cover;
  background-attachment: fixed;
  color: #333;
}

/*Cos del CV*/
body.cv {
	display: flex;
	background-image: url(https://images.unsplash.com/photo-1586076100131-32505c71d0d2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687);
	background-size: 100vw 100vh;
	background-attachment: fixed;
	justify-content: center;
	padding: 60px 0px;
	margin: 50px 80px;
}

/*Tipus de titols*/ 
h1 {
	font-family: "Montserrat";
	width: 500px;
	color: blue;
	font-size: 60px;
	font-weight:790;
	margin-bottom: 3px; 
	line-height: 1.15;
}

h2 {
	font-family: "Montserrat";
	color: blue;
	font-size: 30px;
	font-weight:600;
	margin-bottom: 1px; 
}

h3 {
	font-family: "Montserrat";
	color:  blue;
	font-weight: 200;
	font-size: 20px;
	margin-bottom: 4px; 
	line-height: 1;
}

img{
	width: 300px;
	border:6px solid blue ;
}

/*CONTENIDOR PRINCIAPL*/ 
div.contenidor  {
	display: flex; /*activat flexbox*/
	flex-direction: row; 
	max-width: 1000px;
	width: 90%;
	min-height: 100vh;
	max-height: 470vh;
	margin: 0 auto;
	gap: 20px;
	padding: 50px 70px;
}

/*COLUMNES*/
.col-esq {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding-right: 60px;
  text-align: left;
  align-items: flex-start;
  max-width: 300px;
  margin-left: auto;
}

.col-dreta {
	flex: 3;
	display: flex;
	flex-direction: column;   /*contingut organitzat en columnes*/
	padding-left: 60px;
	margin-top: 270px;      /*columna dreta puja o baixa respecte l'altre columna*/
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}

p {
  font-style: normal;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  line-height: 1.35;     /*espai entre línies dins d’un paràgraf*/
  margin-bottom: 1px;    /*espai després de cada paràgraf*/
}

ul, li {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  line-height: 1.35;
  margin-bottom: 3px;
}

h1, h2, h3 {
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 15px;
}

/*línies sota dels títols nomès a CV*/
body.cv h1,
body.cv h2 {
  border-bottom: 2px solid blue;  /*línia*/
  padding-bottom: 4px;            
  margin-bottom: 15px;            
}

/*ENLLAÇ PARAULA PORTFOLIO*/
a{
	color: black;
	text-decoration:underline;
}

a:hover {
	color: blue;
	text-decoration:underline;
}


/*RESPONSIVE I MEDIA*/
@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }

  .contenidor {
    width: 95%;
    gap: 80px;
  }

  .col-esq img {
    width: 100%;
    height: auto;
  }

  .col-dreta {
    margin-top: 180px;
  }

  p, li {
    font-size: 15px;
  }
}

/*CANVI D'ESTIL SEGONS MIDA DE LA PANTALLA/RESPONSIVE */

@media screen and (max-width: 1280px) {
  .col-esq img { 
  	border-color: red; 
  }


  h1, h2, h3 { 
  	color: red; 
  }
}



@media screen and (min-width: 475px) {
  .col-esq img { 
  	border-color: blue; }
  h1, h2, h3 

  { 
  	color: blue; 
  }
}

/*ANIMACIÓ TITOL (h1) QUAN PASSA EL RATOLÍ*/
@keyframes canviColor {
  0% { 
  	color: blue; }      /* color inicial */

  25% { 
  	color: pink; }   /* primer canvi */

  50% { 
  	color: red; }      /* segon canvi */

  75% { 
  	color: orange; }   /* tercer canvi */

  100% { 
  	color: blue; }    /* torna al color inicial */
}

h1:hover {
  animation: canviColor 10s ease-in-out infinite;
}


/* PORTFOLIO */

body.portfolio {                  
  display: block;    /* important=desactives flexbox de cv */
  padding: 60px 0;
  margin: 0;            
}

/*CAPÇALERA*/
.capcalera {
  max-width: 1000px;   
  width: 90%;       
  margin: 0 auto 24px auto;             
  display: grid;                           /*això fa que "sigui" grid!*/
  grid-template-columns: 1fr auto 1fr;    /*definir com son/ocupen*/
  align-items: center;
  gap: 16px;  
}

/*aliniar text de cada columna de la capçalera*/
.capcalera-esq    { 
	text-align: left; 
	margin-bottom:60px
}
.capcalera-centre { 
	text-align: center; 
		margin-bottom:60px
}
.capcalera-dreta  { 
	text-align: right; 
	margin-bottom:60px
}

/*enllaç correu capçalera*/
.capcalera a { 
	color: black; 
	text-decoration: underline; }

.capcalera a:hover {       /*quan passes x sobre=blau+subrretllat*/
	color: blue;
	text-decoration: underline; }


/*BLOC INICIAL CENTRAT/HERO*/
.hero {               /*general*/
  text-align: center;
  padding: 32px 0 8px 0; 
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
}

.titol-portfolio {       
  font-size: 95px;       
  font-weight: 820;
  color: blue;           
  margin: 0 0 8px 0;
  line-height: 1.1;
}

body.portfolio .titol-portfolio {
  display: block;
  width: auto;        /*perquè h1 no agafi amplada que hi ha definida a CV*/
  max-width: none;
}

.subtitol-portfolio {    
  font-size: 50px;
  font-weight: 820;
  color: blue;         
  margin: 6px 0 10px 0;	  
	margin-bottom: 13px;
}

.intro-portfolio {
  max-width: 680px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.6;
  color: black;
}

/*Canvi del titol h2 respecte el CV (nomès vull canviar aquest) però que NO AFECTI el h2 hero*/ 
body.portfolio h2:not(.subtitol-portfolio) {
  font-size: 19px;
  font-weight: 560;
  color: blue;
  margin-bottom: 3px;
  text-transform: uppercase;  /*sempre majúscules*/
  text-align: left;
}


/*GRID DOS COLUMNES*/ 
.portfolio-grid {
  max-width: 1000px;
  width: 90%;
  margin: 32px auto 48px auto;
  display: grid;                    /*activar grid*/
  grid-template-columns: 1fr 1fr;   /*dues columnes*/
  gap: 67px;                       
}

/*FOTOS DINS GRID*/ 
body.portfolio img {
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid blue;  /*mateix estil que CV*/
}


/*PORTFOLIO RESPONSIVE I MEDIA*/ 
@media (max-width: 475px) {
  body.portfolio { background-image: linear-gradient(lightblue, lightsalmon); }
}



@media screen and (min-width: 1280px) { 
}