#fx-container-profile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: black;
    mix-blend-mode:difference;
    z-index: 0; /* Adjust to place it above the background */
     opacity: 0;
  transition: opacity 0.5s ease-in;
  }

#fx-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: black;
    mix-blend-mode:difference;
    z-index: 0; /* Adjust to place it above the background */
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }

  @keyframes fadeInAscii {
  from { opacity: 0; }
  to { opacity: 1; }
}

#fx-container pre {
  animation: fadeInAscii 2.5s ease-out forwards;
  opacity: 0; /* Start fully hidden */
}

  
  /* Style for individual trail dots */
  .trail-dot {
    position: absolute;
    width: 1000px;
    height: 1000px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transition: transform 1s ease, opacity 0.25s ease-out;
    filter: blur(50px); 
  }
  
  
  /* Style for the large circle on link hover */
  .hover-circle {
    position: fixed;
    width: 400px;
    height: 400px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: -1;
  }
  
  /* Active class for showing and enlarging the hover circle */
  .hover-circle.active {
    opacity: 0.3;
    transform: scale(2.5);
  }

  .hover-color {
    filter: grayscale(100%); /* Default to grayscale */
    transition: filter 0.5s ease; /* Smooth fade to color */
  }
  
  .hover-color:hover {
    filter: grayscale(0%); /* Fade to color on hover */
  }

  .hover-effect {
    font-weight:500;
    color:#FFF !important;
  }