:root { --primary: #3b82f6; --primary-hover: #2563eb; --secondary: #8b5cf6; --text-primary: #ffffff; --text-secondary: #94a3b8; --text-tertiary: #cbd5e1; --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: rgba(255, 255, 255, 0.05); --border-color: rgba(255, 255, 255, 0.1); --font-main: 'IBM Plex Mono', ui-monospace, monospace; } html, body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-main); margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } #root { display: none !important; } .fallback-container { background: var(--bg-card); backdrop-filter: linear-gradient( 45deg, var(--bg-primary), var(--bg-secondary) ); border: 1px solid var(--border-color); border-radius: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9); padding: 2rem; max-width: 600px; width: 85%; margin: auto; animation: fadeIn 2s ease-out forwards; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; } .profileImageContainer { position: relative; width: 120px; height: 120px; margin-bottom: 1rem; } .glowEffect { position: absolute; inset: -10px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 50%; filter: blur(30px); opacity: 0.6; z-index: 0; } .fallback-profile-img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; border: 3px solid var(--border-color); position: relative; z-index: 1; } h1 { font-size: 2rem; font-weight: 700; margin: 1rem 0 0.25rem; background: linear-gradient( to right, var(--primary), var(--secondary) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .fallback-title { font-size: 1.25rem; color: var(--text-secondary); margin: 0.5rem 0; } .fallback-desc { font-size: 1rem; line-height: 1.6; color: var(--text-tertiary); margin-top: 1rem; max-width: 65ch; margin-inline: auto; } .fallback-social { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; font-size: 1.5rem; } .fallback-social a { color: var(--text-secondary); transition: color 0.3s ease, transform 0.2s ease; } .fallback-social a:hover { color: var(--primary); transform: translateY(-3px) scale(1.1); } .js-warning { margin-top: 2rem; color: #f87171; font-weight: 600; font-size: 0.9rem; } @media (max-width: 480px) { .profileImageContainer { width: 90px; height: 90px; } h1 { font-size: 1.5rem; } .fallback-title { font-size: 1.1rem; } .fallback-desc { font-size: 0.95rem; } .fallback-social { font-size: 1.25rem; gap: 1rem; } .fallback-container { padding: 1rem; } } @keyframes fadeIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

Sivothayan Sivasiva

Software Developer

UG Student of University of Peradeniya majoring in Computer Science, Statistics, and Mathematics. Passionate about reverse engineering, open source, and building innovative solutions.

JavaScript is disabled. You’re viewing a simplified version of this site.