@tailwind base; @tailwind components; @tailwind utilities; html { scroll-behavior: smooth; } @layer base { h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } body { font-family: 'Inter', sans-serif; line-height: 1.5; } } /* Floating animation */ .float { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } /* Button glow effect */ .button-glow { position: relative; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 0 30px rgba(139, 0, 0, 0.4); border-radius: 9999px; } .button-glow:hover { box-shadow: 0 0 40px rgba(139, 0, 0, 0.6); transform: translateY(-2px) scale(1.02); } .button-glow::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(139, 0, 0, 0.2), rgba(139, 0, 0, 0)); opacity: 0; transition: opacity 0.3s ease; } .button-glow:hover::before { opacity: 1; } .button-glow::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139, 0, 0, 0.2) 0%, transparent 70%); transform: rotate(45deg); animation: glowRotate 3s linear infinite; } @keyframes glowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Card float effect */ .card-float { transition: all 0.3s ease; } .card-float:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #121212; } ::-webkit-scrollbar-thumb { background: #8B0000; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #A30000; }