/* === Typography and Text Elements === */

h1,
h2,
p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === Header Typography === */
.header-content h1 {
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.header-content h2 {
  font-size: 1.4rem;
  font-weight: 300;
  color: #ddd;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* === Section Headings (shared) === */
#projects h2,
#skills h2,
#codeSnippets h2,
#languagesTools h2,
#blog h2,
#medium h2,
#websites h2,
#contact h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
  color: #222;
}

/* === Responsive Typography === */
@media (max-width: 768px) {
  .header-content h1 {
    font-size: 2rem;
  }

  .header-content h2 {
    font-size: 1.1rem;
  }

  #projects h2,
  #skills h2,
  #codeSnippets h2,
  #languagesTools h2,
  #blog h2,
  #medium h2,
  #websites h2,
  #contact h2 {
    font-size: 2rem;
  }
}