@import url("https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css");

.icon-links-container {
  /* Optional: This centers the whole block of icons on the page */
  max-width: 100%;
  margin: auto;
  text-align: center;
}

/* This targets the icon font itself */
.icon-links-container .ai {
  font-size: 3em;  /* <-- This is your main size control */
  vertical-align: middle;
  color: royalblue;       /* Base icon color */
  
  /* Adds a little space *between* the icons */
  margin: 0.4em; 
  
  /* Smooth color transition on hover */
  transition: opacity 0.2s ease;
}

/* This styles the link (<a> tag) on hover */
.icon-links-container a:hover .ai {
  color: var(--linkcolor);
  opacity: 0.7; /* Fades the icon slightly on hover */
}

/* Add this to your existing CSS file/block */
.my-name-icon {
  /* Use a web-safe font or one you know is loaded */
  font-family: 'Times New Roman', Times, serif; 
  /* Or 'Arial', sans-serif; or 'Georgia', serif; etc. */

  font-weight: bold; /* Make it bold for prominence */
  
  /* --- Adjust this value to visually match your icons --- */
  font-size: 2.0em; /* Start here, then tweak (e.g., 2.2em, 1.8em) */
  /* --------------------------------------------------- */

  color: var(--textcolor); /* Uses your defined text color */
  text-decoration: none; /* Ensure no underline if it becomes a link */
  vertical-align: middle; /* Align vertically with the icons */
  margin: 0 8px; /* Give it space from other icons */
  display: inline-block; /* Essential for vertical-align and margin to work reliably */
}

/* Optional: Add hover effect if you make it a link later */
.icon-links-container a:hover .my-name-icon {
  opacity: 0.7; /* Fades the name slightly on hover */
}