.bg-gradient-animated { background: linear-gradient(-45deg, #0c0c0c, #1a1a2e, #16213e, #0f172a); background-size: 400% 400%; animation: gradient 6s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .neon-border { box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); border: 1px solid rgba(102, 126, 234, 0.4); } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.2); border-top: 2px solid #ffffff; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite; margin-right: 8px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-glow { animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { box-shadow: 0 0 10px rgba(102, 126, 234, 0.5); } to { box-shadow: 0 0 20px rgba(102, 126, 234, 0.8); } } .animate-fade-in { animation: fadeIn 1s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-float { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } .text-blurple { color: #5865F2; } /* Fixed sidebar height to prevent footer overlap */ .sidebar-container { height: calc(100vh - 4rem); /* Full height minus nav height */ overflow-y: auto; padding-bottom: 2rem; /* Add some padding at bottom */ } /* Ensure main content has proper bottom margin */ .main-content { margin-bottom: 200px; /* Space for footer */ }