@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); body { background-color: #0f0f17; color: #f5f5f5; font-family: 'Inter', sans-serif; } .gradient-bg { background: linear-gradient(135deg, #3b0764 0%, #581c87 100%); } .glow { box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); } .glow:hover { box-shadow: 0 0 25px rgba(139, 92, 246, 0.7); } .scan-line { position: relative; overflow: hidden; } .scan-line::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(139, 92, 246, 0.1) 50%, transparent 100%); animation: scan 8s linear infinite; } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .terminal { background-color: rgba(15, 15, 23, 0.8); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 0.5rem; font-family: 'Fira Code', monospace; } .terminal-header { background-color: rgba(10, 10, 16, 0.8); border-bottom: 1px solid rgba(139, 92, 246, 0.2); } .terminal-body { background-color: rgba(5, 5, 8, 0.5); } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } .progress-bar { height: 0.5rem; background-color: rgba(139, 92, 246, 0.2); } .progress-fill { height: 100%; background: linear-gradient(90deg, #7e22ce 0%, #a855f7 100%); transition: width 0.5s ease; }