/* 1. Global Styles: Ensure the entire screen is fully black and text uses the retro font */
html, body {
  background-color: #000 !important; 
  color: #fff; 
  font-family: 'Space Mono', monospace; 
}

/* 2. Style for the FADING TEXT (ONLY the main title 'Ballsacks!' fades) */
#fading-text {
  /* Animation starts immediately and runs for 5 seconds */
  animation: fadeIn 5s ease-in-out forwards; 
  opacity: 0; /* Start invisible */
}

/* 3. Style for the TABS - Tabs are visible immediately (no fade) */
#top-tabs {
    /* No animation defined here, so they appear instantly on page load */
}

/* Custom Hover Effect for the Tabs (from earlier request) */
.btn-outline-light:hover {
  color: #000 !important; /* Text color changes to black */
  background-color: #fff; /* Background fills white */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); /* Adds a white glow */
  transition: all 0.3s ease-in-out; /* Smooth transition for the effect */
}

/* 4. Define the Animation (The Fade-In Keyframes) */
@keyframes fadeIn {
  from {
    opacity: 0; 
  }
  to {
    opacity: 1; 
  }
}