@font-face {
    font-family: "Equateur";
    src: url('/fonts/Equateur-Regular.ttf') format('ttf');
    font-display: swap;
  }

  .font-dotmatrix {
    font-family: "Equateur", serif;
  }

  .darker-gradient {
    background: linear-gradient(90deg, #5a6b6d, #5a696b, #6b675a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .active-tab {
    background: linear-gradient(90deg, #396166, #836421, rgb(170, 26, 52));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 4px rgba(142, 70, 140, 0.6);
  }

  .nav-link:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
  }

  .sticky-active {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    transition: background 0.3s ease-in-out;
  }

  .social-icon {
    background: linear-gradient(90deg, #5a6b6d, #5a696b, #6b675a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .social-icon:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
  }

  #scroll-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 50;
  }

  #scroll-top:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .glitch-effect {
    background: linear-gradient(90deg, #ff9500, #2c15ff, #bd0505);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: glitch-flicker 0.2s steps(2, jump-none) infinite;
    text-shadow: 0 0 4px rgba(168, 3, 3, 0.677);
  }
  
  @keyframes glitch-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
  }

  @media (max-width: 768px) {
    .darker-gradient {
      background: linear-gradient(90deg, #5a6b6d, #5a696b, #6b675a);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }
  
    .active-tab {
      background: linear-gradient(90deg, #396166, #836421, rgb(170, 26, 52));
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 2px 2px 4px rgba(142, 70, 140, 0.6);
    }
    .social-icon {
      background: linear-gradient(90deg, #5a6b6d, #5a696b, #6b675a);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }
    .glitch-effect {
      background: linear-gradient(90deg, #ff9500, #2c15ff, #bd0505);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: glitch-flicker 0.2s steps(2, jump-none) infinite;
      text-shadow: 0 0 4px rgba(168, 3, 3, 0.677);
    }
  }