/* ROOT VARIABLES */
:root {
  --primary-color: #1095c1; /* Your hover color */
  --text-color: white;
}

/* --- General Styling --- */

/* background color */
body {
  background-color: black;
}
.general h1 {
  font-weight: bold;
}
/* Text hover effect (applies to titles and key links) */
.text-hover {
  color: var(--text-color) !important;
  transition: color 0.3s ease;
  text-decoration: none;
}
.text-hover:hover {
  color: var(--primary-color) !important; /* Changes color on hover */
  text-decoration: none;
}

/* --- ICON BUTTONS --- */
/* Styling for social media icons - Used btn-sm in HTML for better sizing */
.btn-icon {
  border-radius: 50%;
  font-size: 20px;
  color: var(--text-color);
  /* The original code had no border, so I removed it for exact match */
  border: none;
  transition: background-color 0.3s ease;
}
/* Replicating the original hover color and removing the background-color rule */
.btn-icon:hover {
  color: var(--primary-color);
  background-color: transparent; /* Ensure no background change */
}

/* --- NAVBAR --- */
.navbar a {
  font-weight: bold;
  color: var(--text-color) !important;
}

/* Custom underline animation for nav links (Github and Medium in the navbar) */
.nav-item a {
  text-decoration: none;
  /* Underline setup */
  background-image: linear-gradient(var(--primary-color) 0 0);
  background-size: 0% 0.08em; /* Fixed height for underline */
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.nav-item a:hover {
  background-size: 100% 0.08em; /* Fully show underline on hover */
}