:root {
    /* this are variables*/
    --text-color: #1a1c20;
    --link-color: #6A0DAD ;
    --background-color:#eeeff1;
}

/* Now we are goint to "reset the default styling by targeting every element" means that we're going to remove or reset the default styles that browsers automatically apply to HTML elements. Each browser has its own set of default styles (such as margins, padding, font sizes, etc.), which can vary and cause a webpage to look different across browsers if we don’t reset them.
To achieve this, we use a CSS rule that targets every element (*) -->  *{   } and resets its styling. */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* to ensure that the scrolling throut the different sections is smooth, since I used id for the sections*/
html{
    scroll-behavior: smooth;
}


/* target the body to set the font family  to the font I embeded from google fonts  and a background color for the body. In case the font does not load I set following the embeded font a "default font" just in case*/

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 70px;
  font-size: 18px; /* Aumenta el tamaño base de todo el texto - increases the text size overall in the site */
  line-height: 1.6; /* Espaciado vertical más cómodo - more vertical space  */
}

/* This adjusts spacing between lines in paragraph text */
p {
  line-height: 1.6;
  max-width: 850px;
  margin-bottom: 20px;
}

/* Here I change the link color of the anchor Tag. to remove the underline from the link we set it to none */
a{
    text-decoration: none;
    color: var(--link-color);
}


  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 999;
  }

  .navbar .logo {
    height: 100px;
    width: auto;
  }

  .navbar .right a {
    margin-left: 20px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
  }

  .hamburger {
    display: none;
    font-size: 26px;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .navbar .right {
      display: none;
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      background-color: #fff;
      flex-direction: column;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar .right a {
      padding: 15px;
      border-top: 1px solid #ddd;
    }
    .navbar .right.open {
      display: flex;
    }
    .hamburger {
      display: block;
    }

      body {
    font-size: 18px;
  }

  }

 

/* SECTION 1: HERO */
/* target the section by using the class name hero... */

.hero-section {
  display: flex; /* because I have two sections in here i set it to to flex */
  justify-content: space-between;
  padding: 0 50px;
  margin-top: 100px; /* this adds some spacing between the NAVIGATION BAR and the next SECTION below */ 
  align-items: center; /* this basically aligned it to the parent element, so basically centered considering photo */
  margin-bottom: 100px; /*with this there is a gap between the hero seccion and the next one */
  gap: 40px; /* this add a gap between the subsection "text" and the image. 
  Note to my self: WARNING ERROR:  here i forgot to close this comment and I was like 10 min trying to figure out why my CSS after this point wasen't working!!!!! :)  */
}
/* this sets a flex for the text and the image subsections in hero section with a ratio of 5 of the total 7 in term of spacing. Meaning the text have 5 of 7 and the image have 2 of the total 7 */

.hero-section .text {
    flex: 5️;
}


.hero-section .text h2 {
font-size: 32px;
}

.hero-section .text .links {
    margin-top: 25px;
    font-size: 18px;
}
 /*  here I forgot to explain to my self  that when I write "a" I am targeting each  anchor tag inside of it*/
.hero-section .text .links a {
    display: inline-block; /* This inline block makes that when the page margine are inferioir to 600px and the elements act responsibly  the text moves together as a block with it corresponding icon*/
    padding: 5px 10px;
    border: 2px solid var(--link-color);
    border-radius: 5px; /* is this value i change it to 30px the border are more oval*/ 
    margin-right: 10px; /*  this adds space between the links buttons skills my journey and Let's talk*/
    margin-bottom: 10px; /* adding this helps to keep space between buttons vertically speaking  when margin page below 600px */
    transition: .1s; /* here in the main element I added a transition so there is one when hovering*/
}
 /* here by adding this  pseudo class "hover" I am adding hover effect to each of the anchor tags, therefor the  a:hover*/
.hero-section .text .links a:hover {
    color: var(--text-color); /* this chages the color of the text*/
    border: 2px solid var(--text-color); /* here I set a boder but reversed color*/
}



.hero-section .headshot {
    flex: 2;
    display: flex; /* here the display and justiffy makes the image to be aligned to the right with the nav on the header */
    justify-content: right;
}
/* after this element I target all it atributes, meaning I write all under it?*/
 .hero-section .headshot img {
    width: 380px;
    border-radius: 50%; /* this made the image round*/ 
 }

/* SECTION 2: SKILLS */

/* this target the seccion and add padding and margin bottom*/ 
.skills-section {
    padding: 0 50px;
    margin-top: 300px;
    margin-bottom: 450px;
}

.skills-section h2{
    text-align: center;
    font-size: 40px;
    
}

.skills-section .text{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 130px;
    
}


/* Hace que el nuevo contenedor sea un contenedor flex */
.skills-section .cells-container {
    display: flex;           /* Activa flexbox en el contenedor */
    flex-wrap: wrap;         /* Permite que los elementos se vayan a otra fila si no caben */
    gap: 100px;               /* Añade espacio entre cada ícono */
    justify-content: center; /* Centra los íconos horizontalmente */
}

.cells {
    display: flex;           /* Hace que cada ícono y su texto sean un bloque */
    flex-direction: column;  /* Coloca la imagen encima del nombre */
    align-items: center;     /* Centra el contenido de cada bloque */
    text-align: center;
    width: 100px;            /* Ancho fijo para cada ícono-fix ---- width  for   each icon. when i changed it from 100 to 200 it was better distributed in the row, because if not they get jammed all in the center and the padding right side looks funny */
    padding: 10px 20px;
    border: 2px solid #d39ee2;
    border-radius: 5px;

}

/* Estilo para el texto */
.cells span {
    font-size: 18px;    /* Tamaño del texto */
    font-weight: bold;  /* Negrita */
    color: #333;        /* Color del texto */
}

/* Estilo para la imagen */
.cells img {
    width: 60px;         /* Ancho de la imagen */
    height: 60px;        /* Alto de la imagen */
    object-fit: cover;   /* Recorta la imagen si es necesario */
}




 /* I could make the Skills cells loke more like button meaning more of a rentrangular form if I add the following targetin the image inside the cells
 .skills-section .cells .cell img { 
 width: 30px;
 height: 30px;
 object-fit: contain;} --> this last one object-fit is in case one image stretches losing the form-  (But actually is not working- must check out  why ??  */
 
 

/* to make it responsive: when it reaches 600px width  remove padding on the side of the NAVIGATION Bars left and right and the text just leaving the icons and making them bigger so they will be visible. this way it will be clean but understandable*/

/* to add a certain style according to a certain width is possible to use for example adding media queries. Following adding media queries, then all the stylinginside the curly brakets will be applies to any with up to 600px when the width is superior to the max width in this case 600px the general styling will apply*/


/*  SECTION:3 My JOURNEY*/

.myjourney-section{

    padding: 0 50px;
    margin-top: 140px;
    margin-bottom: 200px;
}

.myjourney-section h2 {
    font-size: 40px;
    margin-bottom: 20px;
    

}

.myjourney-section .group {

display: flex;
align-items: center;
gap: 50px;
}

.myjourney-section .group .journey-details {
    text-align: center;
    flex: 2️;
}

.myjourney-section .group .journey-details img {
    width: 250px;
    aspect-ratio: 1 / 1 ;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}
.myjourney-section .group .text {

    flex: 8️⃣;
}



/* SECTION 4: CONTACT */
.contact-section {
    padding:0 50px;
    margin-top: 140px;
    margin-bottom: 200px;
}

.contact-section h2{
    font-size: 40px;

}

.contact-section .group{
    display: flex;
    gap: 50px;
}

.contact-section .group .text {
    flex: 3;
    margin-top: 20px;
}

.contact-section .group form {
    flex: 3;
    display: flex;
    flex-direction: column;
}

.contact-section .group form input,
.contact-section .group form textarea {
    font-family: 'Poppins', sans-serif;
    border: 2px solid var(--link-color);
    background-color: transparent;
    padding: 10px;
    margin-bottom: 15px;
    outline: none;
    resize: none;

}

.contact-section .group form button {
 font-size: 20px;
 font-family: 'Poppins', sans-serif;
 color: #fff;
 background-color: var(--link-color);
 border: none;
 height: 50px;
 cursor: pointer;
 transition: .1s;
}
.contact-section .group form button:hover{
    background-color: rgb(158, 33, 207);
    
}



@media (max-width:850px){
/*  SECTION 1: Hero */
 .hero-section .text h2 {
    font-size: 40px;
 }
}


@media (max-width:740px) {
    /*  SECTION 1: Hero */
    .hero-section {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 0 20px;
    }
    /* NOT WORKING CHECK IT OUT LATER with this flex-direction column-reverse should be possible to change the direction and have at this width the image on top of the text*/
    .hero-section .headshot img {
        width: 300px;
    }

.contact-section .group {
    flex-direction: column;
}

}


@media (max-width: 600px){
    /*  will be marking every target element styling for this Width in the media querie*/

    /*NAVBAR styling for max 600px Width*/
nav {
    padding: 0 20px; 
}

/* increase of the icon Size */
nav .right a{
    font-size: 22px;
} 

/* now Change again the last child of NAVIGATION BAR right to how it was originally so that is just the envelope icon showing in this Width*/

nav .right a:last-child{
    color: var(--text-color);
    background-color: var(--background-color); /* I could also write it like " background-color: transparent; " */
    padding: 0;/* removing the padding because of the background color*/

}


/* to hide text on this width target the span inside the Anchor Tag*/
nav .right a span {
    display: none;
}

/* SECTION 1: HERO */
.hero-section {
    padding: 0 20px;
}

.hero-section .text h2 {
    font-size: 30px;
}

/* SECTION ": Skills */
/* Here I target the skills secction */

.skills-section {

    padding: 0 20px;
}

.cells span {
    font-size: 16px;
}


/* SECCTION 3: My JOURNEY*/

.myjourney-section {
    padding: 0 20px;
}

/* SECCTION 4:CONTACT */

.contact-section {
    padding: 0 20px;
}



}

.popup {
  width: 400px;
  background: #fff;
  border-radius: 6px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  text-align: center;
  padding: 0 30px 30px;
  color: #333;
  visibility: hidden;
  transition: transform 0.4s, top 0.4s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.popup img {
  width: 100px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.popup h2 {
  font-size: 38px;
  font-weight: 500;
  margin: 30px 0 10px;
}

.popup button {
  width: 100%;
  margin-top: 50px;
  padding: 10px 0;
  background: #6A0DAD;
  color: #fff;
  border: 0;
  outline: none;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.open-popup {
  visibility: visible;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

#popup-error img {
  background: none;
}

#popup-error h2 {
  color: #B14587;
}

#popup-error button {
  background: #B14587;
}

#popup-error.open-popup {
  visibility: visible;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

/* this will make my logo smaller on Mobile*/
@media (max-width: 600px) {
  .navbar .logo {
    height: 45px;
  }
}

section {
  scroll-margin-top: 90px;
}

.projects-section {
  padding: 50px;
}

.projects-section h2 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 40px;
}

.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.project-card {
  background-color: white;
  padding: 20px;
  border: 2px solid transparent; /* this is the border for the hover effect because I did add the effect but was not visible since the card didn't have any border */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 300px;
  text-align: center;
}

.project-card img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 15px;
}

.project-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.project-card p {
  font-size: 16px;
  margin-bottom: 15px;
}

.project-card a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: underline;
}

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: var(--link-color); /* 👈 SE VERÁ AHORA */
}

.navbar .right a {
  position: relative;
  display: inline-block;
  padding: 10px;
  margin-left: 20px;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Línea animada debajo del texto */
.navbar .right a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: var(--link-color);
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.navbar .right a:hover {
  color: var(--link-color);
}

.navbar .right a:hover::after {
  width: 100%;
}