/* 1. Shift everything to make room for the sidebar */
#allrecords {
  margin-left: 390px;
  box-sizing: border-box;
}


/* 1. Home hellochen text animation */
.blurLoop {
  animation: blurFade 3s ease-in-out infinite;
}

@keyframes blurFade {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  25% {
    filter: blur(5px);
    opacity: 0.5;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* main menu effects*/
.sidebar-main--experience.active {
  color: #9A2474 !important;
}



/* submenu buttons effects*/
.gradient-link {
  position: relative;
  text-decoration: none;
  color: #5C5C5C !important;
}

/* Black static underline */
.gradient-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: black;
}

/* Gradient animated underline */
.gradient-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(241,148,98,1),
    rgba(200,51,29,1),
    rgba(154,36,116,1)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease;
}

/* Fill animation */
.gradient-link:hover {
  color: black !important;
}

.gradient-link:hover::after {
  background-size: 100% 100%;
}

/* Active state */
.gradient-link.active::after {
    background-size: 100% 100% !important;
}

.gradient-link.active {
    color: black !important;
}

/* NEW — ensure active color applies to the real text inside the header element */
.sidebar-main--experience.active,
.sidebar-main--experience.active .tn-atom,
.sidebar-main--experience.active * {
  color: #9A2474 !important;
}