:root {
  --color-primary: #09f;        /* títulos, enlaces principales */
  --color-bg: #e9e1d1;
  --color-bg-hover: #dad9d9;
  --color-text: #333333;
  --color-accent: #00c853;      /* verde brillante */
  --color-secondary: #ffab00;   /* amarillo cálido */
  --color-neutral: #eceff1;     /* gris claro */
  --color-primary-hover: #007ccf;
  --color-btn-mode: #09f;
  --fuente-titulos: "Inter", sans-serif;   
  --fuente-textos: "Anonymous Pro", monospace;
}

.dark {
  --color-primary: #09f;
  --color-bg: #13131d;
  --color-bg-hover: #383846;
  --color-text: #dcdcdc;
  --color-accent: #00c853;
  --color-secondary: #ffab00;
  --color-neutral: #1a1a24;
  --color-primary-hover: #007ccf;
}

#sobreMi{
  padding: 0 140px;
  display: flex;
  padding-bottom: 120px;
}

main #informacionSobreMi{
  padding-top: 110px;
}

#sobreMiMain{
  display: flex;
  flex-direction: row;
  gap: 40px;
}

#sobreMi h1{
  color: var(--color-primary);
  font-family: var(--fuente-titulos);
  width: 100%;
  padding-bottom: 30px;
  font-size: 42px;
}

#sobreMi p{
  color: var(--color-text);
  font-family: var(--fuente-textos);
  font-size: 18px; 
  font-weight: 800;
}

.textoAzul{
  color: var(--color-primary);
}

#foto{
  height: 330px;
  border-radius: 4px;
}

#tituloHobbies{
  padding-top: 50px;
}

#hobbies{
  display: flex;
  gap: 10px;
  padding-top: 20px;
}

#tituloHobbies{
  font-family: var(--fuente-titulos);
  color: var(--color-primary);
  font-size: 40px;
}

.hobbies{
  color: var(--color-text);
  font-size: 19px;
  font-family: var(--fuente-textos);
  border-radius: 6px;
  padding: 10px 10px;
  background-color: #00000028;
}

@media (width >= 1370px) {
  #sobreMi{
    padding-left: 200px;
    padding-right: 200px;
  }
}

@media (max-width: 1323px) {
  #sobreMi{
    padding: 0 0;
  }
}

@media (width <= 990px) {
  
  .project{
    display: flex;
    flex-direction: column;
    
  }

  .imageProjects{
    width: 100%;
  }

  #proyectos{
    gap: 20px;
  }

  .srcProject{
    padding-bottom: 70px;
  }

}

@media (width <= 800px){
  #sobreMiMain{
    display: flex;
    flex-direction: column;
  }

  #sobreMiFoto{
    display: flex;
  }

  #foto{
    display: flex;
    padding-bottom: 20px;
    width: 100%;
    height: 100%;
  }


  #hobbies{
    padding-top: 10px;
    flex-wrap: wrap;
  }
}

@media (width >= 1550px){

  #informacionSobreMi{
    width: 890px;
  }

  #sobreMi{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0;
    width: 100%;
  }
}

@media (width <= 1050px){
  
}