Update src/App.jsx

src/App.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import QRCode from 'qrcode';
 import jsQR from 'jsqr';
+import './index.css'; // Import the external CSS file
 
 // Custom Alert Modal Component
 const CustomAlert = ({ message, onClose }) => {
@@ -748,116 +749,6 @@ const App = () => {
 
             {/* Tailwind CSS CDN - Ensure this is loaded */}
             <script src="https://cdn.tailwindcss.com"></script>
-
-            {/* Custom Tailwind Configuration (if any) - Place after CDN for overrides */}
-            <style>
-                {`
-                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800;900&display=swap');
-
-                .font-inter {
-                    font-family: 'Inter', sans-serif;
-                }
-                .font-orbitron {
-                    font-family: 'Orbitron', sans-serif;
-                }
-
-                /* Custom scrollbar for style selection */
-                .custom-scrollbar::-webkit-scrollbar {
-                    width: 8px;
-                }
-
-                .custom-scrollbar::-webkit-scrollbar-track {
-                    background: rgba(255, 255, 255, 0.05);
-                    border-radius: 10px;
-                }
-
-                .custom-scrollbar::-webkit-scrollbar-thumb {
-                    background: rgba(100, 100, 255, 0.5);
-                    border-radius: 10px;
-                }
-
-                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-                    background: rgba(100, 100, 255, 0.7);
-                }
-
-                /* Scan line animation */
-                .scan-line {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 5px;
-                    background: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.8), transparent);
-                    animation: scan 3s infinite linear;
-                    transform-origin: top;
-                }
-
-                @keyframes scan {
-                    0% { top: 0%; }
-                    50% { top: calc(100% - 5px); }
-                    100% { top: 0%; }
-                }
-
-                /* Fade in up animation for alert */
-                @keyframes fade-in-up {
-                    from {
-                        opacity: 0;
-                        transform: translateY(20px);
-                    }
-                    to {
-                        opacity: 1;
-                        transform: translateY(0);
-                    }
-                }
-                .animate-fade-in-up {
-                    animation: fade-in-up 0.3s ease-out forwards;
-                }
-
-                /* Gradient shift animation */
-                @keyframes gradient-shift {
-                    0% { background-position: 0% 50%; }
-                    50% { background-position: 100% 50%; }
-                    100% { background-position: 0% 50%; }
-                }
-
-                .animate-gradient-shift {
-                    background-size: 400% 400%;
-                    animation: gradient-shift 15s ease infinite;
-                }
-
-                @keyframes gradient-shift-light {
-                    0% { background-position: 0% 50%; }
-                    50% { background-position: 100% 50%; }
-                    100% { background-position: 0% 50%; }
-                }
-
-                .animate-gradient-shift-light {
-                    background-size: 400% 400%;
-                    animation: gradient-shift-light 15s ease infinite;
-                }
-
-                /* Quantum Flux Header Animation */
-                @keyframes quantum-flux {
-                    0% { text-shadow: 0 0 5px rgba(135, 206, 250, 0.5), 0 0 10px rgba(70, 130, 180, 0.5); }
-                    50% { text-shadow: 0 0 15px rgba(135, 206, 250, 0.8), 0 0 25px rgba(70, 130, 180, 0.8); }
-                    100% { text-shadow: 0 0 5px rgba(135, 206, 250, 0.5), 0 0 10px rgba(70, 130, 180, 0.5); }
-                }
-
-                .animate-quantum-flux {
-                    animation: quantum-flux 4s infinite ease-in-out;
-                }
-
-                @keyframes quantum-flux-light {
-                    0% { text-shadow: 0 0 3px rgba(0, 123, 255, 0.3), 0 0 6px rgba(0, 86, 179, 0.3); }
-                    50% { text-shadow: 0 0 10px rgba(0, 123, 255, 0.6), 0 0 18px rgba(0, 86, 179, 0.6); }
-                    100% { text-shadow: 0 0 3px rgba(0, 123, 255, 0.3), 0 0 6px rgba(0, 86, 179, 0.3); }
-                }
-
-                .animate-quantum-flux-light {
-                    animation: quantum-flux-light 4s infinite ease-in-out;
-                }
-                `}
-            </style>
         </div>
     );
 };