tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme("colors.white");
    border-radius: theme("borderRadius.lg");
    padding: theme("spacing.6");
    box-shadow: theme("boxShadow.xl");
  }
  /* ... */

  .neon {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500,
      0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }

  /* .bulb {
    filter: drop-shadow(0 0 5px #fff6a9) drop-shadow(0 0 10px #ffa500)
      drop-shadow(0 0 30px #ff0000);
    color: #fff6a9;
  } */

  .menu-screen::-webkit-scrollbar {
    @apply w-3 rounded-full;
  }

  .menu-screen::-webkit-scrollbar-track {
    @apply rounded-full;
  }

  .menu-screen::-webkit-scrollbar-track-piece {
    @apply border-[4px] border-solid border-white bg-slate-400 dark:border-slate-800 dark:bg-slate-600;
  }

  .menu-screen::-webkit-scrollbar-thumb {
    @apply z-50 w-4 rounded-full bg-red-600;
  }

  /* range slider stuff */
  /*********** Baseline, reset styles ***********/
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  /* Removes default focus */
  input[type="range"]:focus {
    outline: none;
  }

  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
    @apply bg-slate-800 dark:bg-slate-200;

    border-radius: 0.5rem;
    height: 0.5rem;
  }

  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -4px; /* Centers thumb on the track */
    @apply bg-red-500;
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
  }

  input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid #808080;
    outline-offset: 0.125rem;
  }

  /*********** Firefox styles ***********/
  /* slider track */
  input[type="range"]::-moz-range-track {
    background-color: #add8e6;
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  /* slider thumb */
  input[type="range"]::-moz-range-thumb {
    background-color: #808080;
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
  }

  input[type="range"]:focus::-moz-range-thumb {
    outline: 3px solid #808080;
    outline-offset: 0.125rem;
  }
}