body { background-color: #0f1210; font-family: 'Inter', sans-serif; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter Tight', sans-serif; letter-spacing: -0.025em; } .clickable { cursor: pointer; } /* Refined color palette */ :root { --lavender-primary: #c2a0dc; --lavender-secondary: #B39DDB; --lavender-tertiary: #C9A3E4; --lavender-dark: rgba(124, 99, 154, 0.1); --bg-dark: #0f1210; --bg-card: rgba(22, 27, 26, 0.7); --text-light: #f3f4f6; --text-muted: #9ca3af; } /* Custom color classes */ .bg-custom-lavender { background-color: var(--lavender-primary); } .border-custom-lavender { border-color: var(--lavender-primary); } .text-custom-lavender { color: var(--lavender-primary); } .hover\:bg-custom-lavender:hover { background-color: var(--lavender-primary); } .hover\:border-custom-lavender:hover { border-color: var(--lavender-primary); } .hover\:text-custom-lavender:hover { color: var(--lavender-primary); } .bg-custom-lavender-900\/30 { background-color: var(--lavender-dark); } .text-custom-lavender-300 { color: var(--lavender-primary); } /* Typography */ .section-heading { font-weight: 800; margin-bottom: 1.5rem; font-size: 1.75rem; letter-spacing: -0.025em; position: relative; display: inline-block; padding-bottom: 0.15rem; } .section-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--text-light); border-radius: 1px; } /* Business card glass effect */ .glass-card { background: var(--bg-card); backdrop-filter: blur(15px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); } /* Matte glass effect for skill and project blocks */ .matte-glass { background: var(--bg-card); backdrop-filter: blur(10px); box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; /* Ensure the blob stays contained */ border: 1px solid rgba(255, 255, 255, 0.05); } .contact-link { text-decoration: underline; } /* Animated blobs with improved colors */ .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.2; } .blob-1 { background-color: var(--lavender-primary); width: 220px; height: 220px; top: -70px; left: 20%; animation: blob-move-1 25s ease-in-out infinite alternate; } .blob-2 { background-color: var(--lavender-secondary); width: 280px; height: 280px; bottom: -70px; right: 15%; animation: blob-move-2 20s ease-in-out infinite alternate; } .blob-3 { background-color: var(--lavender-tertiary); width: 200px; height: 200px; top: 40%; left: 10%; animation: blob-move-3 22s ease-in-out infinite alternate; } @keyframes blob-move-1 { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, 20px) scale(1.1); } 66% { transform: translate(-20px, 40px) scale(0.9); } 100% { transform: translate(10px, 30px) scale(1.05); } } @keyframes blob-move-2 { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, -20px) scale(1.15); } 66% { transform: translate(20px, -30px) scale(0.95); } 100% { transform: translate(-15px, -25px) scale(1.1); } } @keyframes blob-move-3 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(8px, -10px) scale(0.98); } 50% { transform: translate(-10px, 8px) scale(1.03); } 75% { transform: translate(5px, -5px) scale(0.95); } 100% { transform: translate(7px, -7px) scale(1); } } /* Skill tags and project tags */ .skill-tag, .project-tag { background-color: var(--lavender-dark); color: var(--lavender-secondary); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; } /* Icons styling */ .icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; min-width: 1.25rem; vertical-align: middle; margin-top: 0px; position: relative; } /* Improved scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(15, 18, 16, 0.8); } ::-webkit-scrollbar-thumb { background: rgba(220, 187, 226, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(220, 187, 226, 0.5); }