Azkanjut/ai-problem-solver-hub

1/* Custom Styles for AI Problem Solver Hub */2 3/* Smooth scrolling */4html {5    scroll-behavior: smooth;6}7 8/* Glitch text effect */9.glitch-text {10    position: relative;11    animation: glitch 3s infinite;12}13 14.glitch-text::before,15.glitch-text::after {16    content: attr(data-text);17    position: absolute;18    top: 0;19    left: 0;20    width: 100%;21    height: 100%;22}23 24.glitch-text::before {25    animation: glitch-effect 3s infinite;26    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);27    transform: translate(-2px, -2px);28    color: #8b5cf6;29    opacity: 0.8;30}31 32.glitch-text::after {33    animation: glitch-effect 2s infinite;34    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);35    transform: translate(2px, 2px);36    color: #6366f1;37    opacity: 0.8;38}39 40@keyframes glitch-effect {41    0% { opacity: 0.6; transform: translate(0); }42    20% { opacity: 0.8; transform: translate(-2px, 2px); }43    40% { opacity: 0.6; transform: translate(-2px, -2px); }44    60% { opacity: 0.8; transform: translate(2px, 2px); }45    80% { opacity: 0.6; transform: translate(2px, -2px); }46    100% { opacity: 0.8; transform: translate(0); }47}48 49/* Neon glow effect */50.neon-glow {51    text-shadow: 52        0 0 5px currentColor,53        0 0 10px currentColor,54        0 0 15px currentColor,55        0 0 20px currentColor;56    animation: neon-pulse 2s infinite;57}58 59@keyframes neon-pulse {60    0%, 100% {61        text-shadow: 62            0 0 5px currentColor,63            0 0 10px currentColor,64            0 0 15px currentColor,65            0 0 20px currentColor;66    }67    50% {68        text-shadow: 69            0 0 10px currentColor,70            0 0 20px currentColor,71            0 0 30px currentColor,72            0 0 40px currentColor,73            0 0 70px currentColor;74    }75}76 77/* Custom scrollbar */78::-webkit-scrollbar {79    width: 8px;80}81 82::-webkit-scrollbar-track {83    background: #1e293b;84}85 86::-webkit-scrollbar-thumb {87    background: linear-gradient(45deg, #6366f1, #8b5cf6);88    border-radius: 4px;89}90 91::-webkit-scrollbar-thumb:hover {92    background: linear-gradient(45deg, #4f46e5, #7c3aed);93}94 95/* Hover effects */96.hover-lift {97    transition: transform 0.3s ease, box-shadow 0.3s ease;98}99 100.hover-lift:hover {101    transform: translateY(-5px);102    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);103}104 105/* Gradient text */106.gradient-text {107    background: linear-gradient(45deg, #6366f1, #8b5cf6);108    -webkit-background-clip: text;109    -webkit-text-fill-color: transparent;110    background-clip: text;111}112 113/* Fade-in animation */114.fade-in {115    opacity: 0;116    transform: translateY(30px);117    transition: opacity 0.6s ease, transform 0.6s ease;118}119 120.fade-in.visible {121    opacity: 1;122    transform: translateY(0);123}124 125/* Particle background effect */126.particles {127    position: absolute;128    top: 0;129    left: 0;130    width: 100%;131    height: 100%;132    overflow: hidden;133    z-index: -1;134}135 136.particle {137    position: absolute;138    background: linear-gradient(45deg, #6366f1, #8b5cf6);139    border-radius: 50%;140    opacity: 0.3;141    animation: float 6s infinite ease-in-out;142}143 144@keyframes float {145    0%, 100% {146        transform: translateY(0) rotate(0deg);147    }148    50% {149        transform: translateY(-20px) rotate(180deg);150    }151}