awebsite/static/css/skills.css

/* Basic Layout for Skills List */
#skills-content {
  margin: 2rem 0;
}

#skills-content .category {
  margin-bottom: 3rem;
}

#skills-content .category h3 {
  font-size: 1.5rem;
  font-weight: regular;
  margin-bottom: 1rem;
}

/* Skills container for single-line display */
#skills-content .skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Use flexbox for single-line display */
  flex-wrap: wrap; /* Allow skills to wrap if needed */
  gap: 1rem; /* Spacing between skills */
}

/* Skill List Item */
#skills-content .skills-list .skill {
  display: inline-flex; /* Ensures each skill is aligned inline */
  align-items: center;
  position: relative;
  cursor: pointer; /* Show pointer cursor on hover */
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit color from parent */
  transition: background-color 0.3s, color 0.3s;
}


/* Skill Name */
#skills-content .skills-list .skill span {
  display: inline-block;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  line-height: 1.4;
}

/* Skill Icon */
#skills-content .skills-list .skill .skill-icon {
  margin-right: 0.5rem;
  color: var(--accent-color);
  font-size: 1.4rem;
  vertical-align: middle;
}

/* Hover Effects for Skills */
#skills-content .skills-list .skill:hover::before {
  background: var(--accent-color-dark);
}

#skills-content .skills-list .skill:hover {
  background-color: var(--accent-color-alpha);
  color: var(--fg-color); /* Change text color on hover */
}

/* Skill Category Hover Effect */
#skills-content .skills-list .skill:hover span {
  color: var(--fg-color);
}

/* Optional: Customize Icon Color on Hover */
#skills-content .skills-list .skill:hover .skill-icon {
  color: var(--fg-color);
}