.bulbed .banner{
    background-color: var(--secondary);
    /* Create a portrait that surrounds it only by the bottom part*/
    border: 0px;
    border-bottom: 7px solid var(--bulb);
}

.bulbed .banner #logo{
    filter: invert(87%) sepia(22%) saturate(1386%) hue-rotate(13deg) brightness(107%) contrast(113%);
}

.bulbed .navbar li a{
    filter: invert(87%) sepia(22%) saturate(1386%) hue-rotate(13deg) brightness(107%) contrast(113%);
}

.bulbed .wheels {
    background-color: var(--secondary);
    border: 0px;
    border-bottom: 7px solid var(--bulb);
  }
.bulbed .wheels .container .indications {
    filter: invert(87%) sepia(22%) saturate(1386%) hue-rotate(13deg) brightness(107%) contrast(113%);
}
.bulbed .menu .toggle {
    background-color: var(--bulb);
    color: var(--secondary);
}

.bulbed .menu.active .toggle {
    color: var(--bulb);
    background-color: var(--secondary);
}

.bulbed .menu.active .toggle.active {
    color: var(--bulb);
    box-shadow: 0 0 0 68px var(--bulb);
}

.bulbed .menu.active .indicator::before{
    background: var(--secondary);
    box-shadow: 0 0 0 5px var(--secondary);
  }

.bulbed .menu li a{
    color: var(--bulb);
    background-color: var(--secondary);
}

.bulbed .graph1 {
    visibility: hidden;
}
.bulbed .graph2 {
    visibility: visible;
}
.bulbed .firefly, .bulbed .firefly::before, .bulbed .firefly::after {
    visibility: visible;
}

.bulbed  input[type=range]::-webkit-slider-thumb{
    background-color: var(--secondary);
}

.bulbed input[type=range] {
    background: linear-gradient(var(--secondary), var(--secondary)) no-repeat center;
    /* Use a linear gradient to generate only the 2px height background */
    background-size: 100% 2px;
}

/* Estilo de la barra de desplazamiento */
.bulbed::-webkit-scrollbar {
    background-color: rgba(254, 252, 36, 0.2);
  }
  
  /* Estilo del "pulgador" o "thumb" de la barra de desplazamiento */
.bulbed::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0, 1);
  }
  
  /* Estilo del "pulgador" o "thumb" de la barra de desplazamiento cuando se está haciendo scroll */
.bulbed::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.9);
  }

.bulbed #male{
    visibility: hidden;
}

.bulbed #female{
    visibility: visible;
}

.bulbed .indices{
    color: var(--secondary);
}