: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;
  --border-image: 1px solid rgb(0, 114, 190);
  --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;
  --border-image: none;
}

#misProyectos{
  padding: 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 120px;
}

#misProyectos #tituloCabecera{
  color: var(--color-primary);
  font-size: 42px;
}

#proyectos{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 110px;
  gap: 50px;
  
}

.infoProjects{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#misProyectos h1{
  color: var(--color-text);
  width: 100%;
  font-family: var(--fuente-titulos);
}

#misProyectos p{
  color: var(--color-text);
  font-family: var(--fuente-textos);
  font-size: 20px;
  font-weight: 700;
}

.project{
  display: flex;
  gap: 30px;
}

.tecnProjects{
  display: flex;
  gap: 8px;
}

.tecnProjects p{
  background-color: #00000028;
  padding: 5px 8px;
  border-radius: 4px;
}

.imageProjects{
  border-radius: 5px;
  width: 400px;

}

.srcProject{
  display: flex;
  gap: 8px;
}

.srcProject a{
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--fuente-textos);
  font-size: 20px;
  font-weight: 700;
  background-color: #00000028;
  padding: 5px 8px;
  border-radius: 4px;
  &:hover{
    cursor: pointer;
    background-color: #2b2b2b48;
    outline: 1px solid var(--color-secondary);
  }
}

@media (width >= 1370px) {
  #misProyectos{
    padding: 0 200px;
  }
}

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

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

  .imageProjects{
    width: 100%;
  }

  #proyectos{
    gap: 20px;
  }

  .srcProject{
    padding-bottom: 70px;
  }

}

@media (width >= 1550px){
  
  #proyectos{
    width: 900px;
  }

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


@media (width >= 440px){

}