/* estil tota la pagina*/ 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*afecta nomes al body d'qqui*/
html, body {
  height: 100%;
  font-family: 'Times New Roman', serif;
  color: black;
}

/*topbar per el cv i portfoli, no a l'inici*/

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;           
  border-bottom: 2px solid black;
  background-color: white;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;
}


.topbar a {
  text-decoration: none;
  color: black;
  font-size: 1.6rem;
  font-family: 'Times New Roman', serif;
}

.inici {
  position: absolute;
  left: 50%;
  transform: translateX(-180px);
}

.link-dreta {
  position: absolute;
  left: 50%;
  transform: translateX(120px);   
}

 .estrella {
  width: 28px;
  filter: grayscale(100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  animation: spin 6s linear infinite;
}
/*rotació estrella*/

@keyframes spin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
@media (max-width: 600px) {
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;   /* espai als costats */
  }

/*mes petito el text*/
  .topbar .inici{
   font-size: 1rem;
  }
  .topbar .link-dreta {
    font-size: 1rem;  
  }

  .topbar .estrella {
    width: 25px;  /* fa l'estrella més petita */
    height: auto;
  }
}


/*pagina principal, index, inici*/

body.home {
  background-image: url("imatges/fons-ariadna.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/*enllaços portfoli i curriculum*/
.links {
  position: absolute;
  right: 2%;
  bottom: 52%;
  text-align: right;
  z-index: 10; /*controla quin element esta per sobre com capes*/
}

.links a {
  font-size: 1.6rem;
  text-decoration: none;
  color: black;
  display: block;
  margin: 0.5rem 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}


.links a:hover {
  transform: scale(1.2);
}

/* si ratoli esta per sobre d'un l'altre apareix blur*/
.links:hover a:not(:hover) {
  filter: blur(2px);
}

/* Foto de l'index */
.foto_inici {
  width: 25%;
  filter: grayscale(100%) contrast(130%);
  position: absolute;
  right: 2%;
  bottom: 20%;
  transition: filter 0.4s ease;
   max-width: 500px; /* que no superi aquest temany*/
}

.foto_inici:hover {
filter: grayscale(0%) sepia(70%) hue-rotate(-10deg) saturate(600%);
}

/*adaptar a movil, pantalles mes petites*/
@media (max-width: 800px) {

  /* Centrar la imatge */
  .foto_inici {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 330px;
  }

  /* al centre de la imatge */
  .links {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;  /* per damunt de la imatge */
  }

  
  .links a {
    color: black;
    font-weight: normal;
    font-size: 1.8rem;
    text-decoration: none;
    text-shadow: 0 0 5px white; 
    text-align: center;
  }

  body.home {
    background-size: cover;
    background-position: center;
  }
}


/* cv pantalla*/
body.cv {
 background-image: url("imatges/fons-ariadna.png");
   background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;   
  padding-top: 90px;
  font-family: 'Times New Roman', serif;;
}

.contingut_cv {
  width: 35%;
  max-width: 700px;
  margin: 180px 0 100px 120px;
  background-color: white;
  border: 2px solid black;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  animation: fadeSlide 1s ease forwards,drift 6s ease-in-out infinite; /*aparició i boxshadow moviment*/
  opacity: 0;
  transform: translateY(20px);
  box-shadow: 12px 12px 0 rgba(0,0,0,0.25);
}


/* Títols negres del CV */
.seccio_cv h1 {
  background-color: black;
  color: white;
  font-size: 2.3rem;
  padding: 4px 8px;
  margin: 15px 0 25px 0;
  font-weight: normal;
}



body.cv .seccio_cv ul > li { /*li fill directe de ul pero no afecte si hi ha algun li mes baix el il principal*/
  list-style-type: square;
  list-style-position: inside;
  font-size: 1.3rem;
  margin-bottom: 6px;
  padding-left: 30px;
}

body.cv .seccio_cv ul ul li { /*hi ha un li dintre d'un altre ul dintre d'un altre ul*/
  list-style-type: circle;
  list-style-position: inside;
  font-size: 1.1rem;
  padding-left: 35px;
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .contingut_cv{
    width: 90%;
    margin: 140px auto 60px auto; /*centrar al movil*/
  }
}
@keyframes drift {
  0% { box-shadow: 12px 12px 0 rgba(0,0,0,0.25); }
  50% { box-shadow: 4px 4px 0 rgba(0,0,0,0.15); }
  100% { box-shadow: 12px 12px 0 rgba(0,0,0,0.25); }
}
/*portfoli, grid, 2 columnes*/

body.portfolio {
  background-image: url("imatges/fons-ariadna.png");
  background-size: cover;
  background-position: center;
  padding-top: 90px;
}

/* Contenidor de la grid */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 50px 10% 200px 10%;
  width: 80%;
  background-color: black;
  margin: 0 auto;
  overflow: visible;
}

/*projecte, hortizontal/vertical, projecte inclou tot allog que te projecte al nom*/
.project img {
  width: 100%;
  height: auto;        
  object-fit: contain; 
  filter: blur(3px) brightness(70%);
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* Títol */
.project h2 {
  font-family: 'Times New Roman' serif;
  font-weight: normal;
  font-size: 2.3rem;
  background-color: black;
  color: white;
  padding: 5px 8px;
  margin-top: 8px;
}

/* Subtítol/Descripció */
.project p {
  background-color: black;
  color: white;
  padding: 5px 8px;
  font-size: 1rem;
  margin-top: 4px;
}

.project {
  transition: transform 0.4s ease;
  overflow: visible; 
}

.project:hover {
  transform: scale(1.05); 
}

.project:hover img {
  transform: scale(1.05); 
  filter: blur(0) brightness(100%);
}


/* per dispositius mes petits*/
@media (max-width: 900px) {
  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  .contingut_cv {
    width: 85%;
  }

  .foto_inici {
    width: 50%;
  }

  .links {
    right: 5%;
  }
}