/* 1. Reset básico y fondo */
body {
  background-color: #0d1117;
  color: #e6edf3;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

/* 2. Estilo para tus marcas */
ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Esto alinea los botones al centro del contenedor */
  width: 100%;
}

li {
  background: #21262d;
  margin: 10px 0;
  padding: 15px 40px;
  border-radius: 8px;
  border: 1px solid #30363d;
  transition: 0.3s;
  width: 250px; /* Esto hará que todas las tarjetas tengan el mismo tamaño */
  text-align: center;
}

/* Efecto Gamer: que reaccione al pasar el mouse */
li:hover {
  border-color: #58a6ff;
  transform: scale(1.05);
}

h1 {
  color: #58a6ff;
}

/* 3. Nueva sección "Sobre mí" */
section {
  max-width: 600px;
  margin: 30px auto 0 auto; /* El 'auto' la mantiene centrada */
  text-align: center;
}
.profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e6edf3;
  margin: 0 auto 10px auto; /* El 'auto' en los lados ayuda a centrar */
}
header {
  display: flex;
  flex-direction: column; /* Alinea los elementos uno abajo del otro */
  align-items: center; /* Los centra horizontalmente */
  text-align: center; /* Centra también los textos (h1, p) */
  padding: 40px 20px 10px 20px; /* Reducimos el padding inferior de 40px a 10px */
}
.btn-primary {
  background-color: #238636; /* Verde "GitHub" que denota éxito */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s; /* Para que el cambio de color sea suave */
  margin-top: 15px;
}

.btn-primary:hover {
  background-color: #2ea043; /* Un verde más brillante al pasar el mouse */
}