/* Modern Neon Talentenshow kleurenpalet */
:root {
  --color-bg: #181828;

  --color-accent: #ffe156;    /* Neon geel */
  --color-gold: #ffd700;      /* Neon goud */

  --color-white: #fff;
  --color-primary: #ff0071;
  --color-shadow: #2575fc;

  /* Overschrijf Bootstrap paars met #ff0071 */
  --bs-primary: #ff0071;
  --bs-primary-rgb: 255,0,113;
}

/* Neon Talentenshow thema */

body {
  background: var(--color-bg);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area */
main {
  flex: 1;
}

/* Navbar */
.navbar {
  background: var(--color-bg) !important;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.6);
  border-bottom: 2px solid var(--color-primary);
}

.navbar-custom {
  background-color: #343a40; /* Voorbeeld donkere kleur, aanpassen indien nodig */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Navbar logo */
.navbar-brand .bi-mic-fill {
  font-size: 2rem;
  color: var(--color-gold);
}
.navbar-brand span {
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary), 0 0 16px var(--color-primary);
  font-size: 2rem;
}

/* Navbar links */
.navbar .nav-link {
  color: var(--color-white) !important;
  font-weight: bold;
  text-shadow: 0 0 6px var(--color-shadow);
  transition: color 0.2s;
}
.navbar .nav-link.active, .navbar .nav-link:hover {
  color: var(--color-gold) !important;
  text-shadow: 0 0 8px var(--color-gold), 0 0 16px var(--color-gold);
}

/* Zorg dat de tekst in de navbar altijd zichtbaar is */
.navbar-custom .navbar-nav .nav-link {
  color: #fff !important;      /* Witte tekst */
}

.navbar-custom .navbar-nav .nav-link.active,
.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .nav-link:hover {
  color: #ffd700 !important;   /* Goudkleur bij hover/active */
}

/* Header logo */
.header-logo {
  gap: 10px;
}
.header-logo .bi-mic-fill,
.header-logo .bi-ticket-perforated,
.header-logo .bi-person-plus-fill,
.header-logo .bi-people-fill,
.header-logo .bi-person-badge-fill {
  font-size: 2.5rem;
  color: var(--color-gold);
}
.header-logo span {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 2.5rem;
}

/* Custom button */
.custom-button {
    background-color: #6a11cb !important; /* Dezelfde kleur als de navbar */
    border-color: #343a40 !important; /* Optioneel: ook de border dezelfde kleur maken */
    color: white !important; /* Zorg ervoor dat de tekst goed leesbaar is */
}

.custom-button2 {
  background-color: #e83e8c !important;
  border-color: #e83e8c !important;
  color: #fff !important;
}

.custom-button:hover {
    background-color: #491086 !important; /* Iets donkerder voor een hover-effect */
    border-color: #23272b !important;
}

.custom-button2:hover {
    background-color: #c8b613 !important; /* Iets donkerder voor een hover-effect */
    border-color: #23272b !important;
}

/* Overschrijf Bootstrap paars met #ff0071 */
:root {
  --bs-primary: #ff0071;
  --bs-primary-rgb: 255,0,113;
}

/* Voor custom knoppen */
.custom-button,
.custom-button2 {
  background-color: #ff0071 !important;
  border-color: #ff0071 !important;
  color: #fff !important;
}

.custom-button:hover,
.custom-button2:hover {
  background-color: #d6005e !important;
  border-color: #d6005e !important;
  color: #fff !important;
}