Update candle UI for responsive screen sizes

Author: Ritika Mishra

src/components/CandleLit.tsx

@@ -48,7 +48,7 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 200 300"
-                    className={`absolute ${isFullPage ? '-top-[42%] sm:-top-[40%] md:-top-[50%] lg:-top-[40%]' : '-top-[25%] sm:-top-[18%] md:-top-[14%] lg:-top-[24%]'} left-1/2 transform -translate-x-1/2 w-full h-auto z-50 drop-shadow-xl pointer-events-none`}
+                    className={`absolute ${isFullPage ? '-top-[42%] sm:-top-[40%] md:-top-[50%] lg:-top-[42%]' : '-top-[25%] sm:-top-[18%] md:-top-[14%] lg:-top-[14%]'} left-1/2 transform -translate-x-1/2 w-full h-auto z-50 drop-shadow-xl pointer-events-none`}
                     preserveAspectRatio="xMidYMid meet"
                 >
 
@@ -85,8 +85,8 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
                         className="transition-all duration-300 animate-flicker"
                     />
                 </svg>
-                <div className={`absolute bottom-0 w-full ${isFullPage ? 'h-full' : 'h-[30%] sm:h-[32%] md:h-[34%] lg:h-[36%]'} bg-gradient-to-b from-gray-100 to-gray-200 dark:from-stone-600 dark:to-stone-700 rounded-b-xl rounded-t-md border border-gray-300 dark:border-white/20 backdrop-blur-md shadow-xl before:absolute before:inset-0 before:bg-white/10 before:opacity-40 before:rounded-b-xl before:rounded-t-md`}>
-                    <div className="absolute inset-0 overflow-hidden rounded-b-xl rounded-t-md bg-gradient-to-b from-cyan-300 via-blue-400 to-blue-400">
+                <div className={`absolute bottom-0 w-full ${isFullPage ? 'h-full' : 'h-[30%] sm:h-[32%] md:h-[34%] lg:h-[36%]'} bg-gradient-to-b from-gray-100 to-gray-200 dark:from-stone-600 dark:to-stone-700  rounded-t-md  backdrop-blur-md shadow-xl before:absolute before:inset-0 before:bg-white/10 before:opacity-40 before:rounded-b-xl before:rounded-t-md`}>
+                    <div className="absolute inset-0 overflow-hidden  rounded-t-md bg-gradient-to-b from-cyan-300 via-blue-400 to-gray-900">
                         <div className="absolute inset-0   flex items-center justify-center">
                             <div className="text-sm sm:text-xl md:text-xl lg:text-2xl font-semibold text-gray-700 px-2 sm:px-3 py-1 ">
                                 {Number.isFinite(betaPower) ? String(Math.floor(betaPower)).padStart(2, '0') : '00'}