/* content.css - Layout, glassmorphism, and content styles */ .glass { background: rgba(20, 20, 20, 0.125); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .main-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1200px; width: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.125); backdrop-filter: blur(8px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .content { color: white; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(32px) saturate(180%) brightness(1.1); -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255,255,255,0.15); padding: 32px 24px; transition: background 0.3s, box-shadow 0.3s; min-width: 26rem; max-width: 26rem; } .social-links { position: relative; } .social-link { display: inline-flex; align-items: center; } .email-tooltip { position: absolute; background: rgba(40, 40, 40, 0.95); color: #fff; padding: 6px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; box-shadow: 0 2px 12px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 10; white-space: nowrap; width: max-content; display: block; } /* Stylish tooltip for email copy */ .email-tooltip { position: absolute; left: 50%; top: -32px; transform: translateX(-50%) scale(1); background: rgba(40, 40, 40, 0.95); color: #fff; padding: 6px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; box-shadow: 0 2px 12px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 10; white-space: nowrap; }