body {
  background: #0a0a0b;
  color: #fff;
  min-height: 100vh;
}

.header-nav {
  background: rgba(10, 10, 11, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(19, 117, 225, 0.1);
}

.mobile-menu {
  background: rgba(10, 10, 11, 0.98);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 40;
}

.mobile-menu.active {
  transform: translateX(0);
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Icon glow animations */
@keyframes trophyGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(19, 117, 225, 0.4))
      drop-shadow(0 0 4px rgba(19, 117, 225, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(19, 117, 225, 0.6))
      drop-shadow(0 0 8px rgba(19, 117, 225, 0.4))
      drop-shadow(0 0 12px rgba(19, 117, 225, 0.2));
  }
}

@keyframes crownGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.4))
      drop-shadow(0 0 4px rgba(234, 179, 8, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.6))
      drop-shadow(0 0 8px rgba(234, 179, 8, 0.4))
      drop-shadow(0 0 12px rgba(234, 179, 8, 0.2));
  }
}

/* Apply animations to the icons */
.fa-trophy {
  animation: trophyGlow 2s ease-in-out infinite;
}

.fa-crown {
  animation: crownGlow 2s ease-in-out infinite;
}

/* Add hover effect to enhance the glow */
a:hover .fa-trophy {
  filter: drop-shadow(0 0 6px rgba(19, 117, 225, 0.8))
    drop-shadow(0 0 12px rgba(19, 117, 225, 0.4));
}

a:hover .fa-crown {
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.8))
    drop-shadow(0 0 12px rgba(234, 179, 8, 0.4));
}