body {
    background: #000;
    /* pure black */
    color: #fff;
    /* white text */
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 2rem;
    margin: 0;
}

h1 {
    color: white;
    text-align: center;
    padding: 10%;
}

h3 {
    color: white;
    text-align: center;
    padding: 0%;
}

.social-links {
    list-style: none;
    display: flex;
    gap: 1.8rem;
    padding: 0;
    margin: 2rem 0;
    justify-content: center;
}

.social-links a {
  display: inline-block;           /* Makes <a> wrap the icon + padding */
  padding: 12px;                   /* Increases clickable area */
  color: #e0e0e0;
  font-size: 2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  border-radius: 50%;              /* Optional: circular hit area */
  line-height: 1;                  /* Keeps icon centered */
}

/* Hover lift + brand color */
.social-links a:hover {
  transform: translateY(-5px);
}

/* ---- Brand-specific colors (on hover) ---- */
.social-links a[href*="github"]:hover   { color: #fff; }     /* GitHub white */
.social-links a[href*="x.com"]:hover   { color: #1DA1F2; }   /* X blue */
.social-links a[href*="linkedin"]:hover{ color: #0A66C2; }   /* LinkedIn blue */

/* Optional: subtle glow on hover */
.social-links a:hover {
  filter: drop-shadow(0 0 8px currentColor);
  transform: translateY(-5px);
}