kingdelexx/codewizard-s-digital-grimoire
0
1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');2 3/* Base Styles */4body {5 font-family: 'Inter', sans-serif;6 background-color: #111827;7}8 9/* Custom Scrollbar */10::-webkit-scrollbar {11 width: 8px;12}13 14::-webkit-scrollbar-track {15 background: #1f2937;16}17 18::-webkit-scrollbar-thumb {19 background: #6d28d9;20 border-radius: 4px;21}22 23::-webkit-scrollbar-thumb:hover {24 background: #7c3aed;25}26 27/* Animations */28@keyframes fadeIn {29 from { opacity: 0; transform: translateY(20px); }30 to { opacity: 1; transform: translateY(0); }31}32 33.animate-fade-in {34 animation: fadeIn 0.6s ease-out forwards;35}36 37.delay-100 {38 animation-delay: 0.1s;39}40 41.delay-200 {42 animation-delay: 0.2s;43}44 45/* Project Card Hover Effect */46.project-card {47 transition: transform 0.3s ease, box-shadow 0.3s ease;48}49 50.project-card:hover {51 transform: translateY(-5px);52}53/* Light/Dark Mode Toggle */54.theme-toggle {55 background: rgba(17, 24, 39, 0.8);56 border-radius: 9999px;57 padding: 0.25rem;58 display: flex;59 cursor: pointer;60 transition: all 0.3s ease;61}62 63.theme-toggle:hover {64 transform: scale(1.05);65}66 67/* Glass Morphism Effect */68.glass {69 background: rgba(30, 41, 59, 0.7);70 backdrop-filter: blur(10px);71 -webkit-backdrop-filter: blur(10px);72 border: 1px solid rgba(255, 255, 255, 0.05);73 transition: all 0.3s ease;74}75 76.glass:hover {77 transform: translateY(-2px);78 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);79}80 81/* Light Mode Styles */82.light-mode {83 background-color: #f8fafc;84 color: #1e293b;85}86 87.light-mode .glass {88 background: rgba(255, 255, 255, 0.7);89 border: 1px solid rgba(0, 0, 0, 0.05);90}91 92.light-mode .text-gray-400 {93 color: #64748b;94}95 96.light-mode .bg-gray-800 {97 background-color: #e2e8f0;98}99 100.light-mode .bg-gray-900 {101 background-color: #f1f5f9;102}103 104.light-mode .border-gray-700 {105 border-color: #cbd5e1;106}107