:root { --breath-speed: 3s; --breath-scale: 1.05; } @keyframes breathe { 0% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(var(--breath-scale)); opacity: 1; } 100% { transform: scale(1); opacity: 0.65; } } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0f172a; font-family: 'Inter', sans-serif; color: white; overflow: hidden; position: relative; } #bg-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.04); filter: brightness(0.72) saturate(1.08) blur(1px); } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.20) 22%, rgba(0,0,0,0.30) 48%, rgba(0,0,0,0.50) 75%, rgba(0,0,0,0.62) 100%); } .profile-container { text-align: center; width: 90%; max-width: 400px;
z-index: 1; margin-bottom: 50px; } .avatar-ring { width: 156px; height: 156px; margin: 0 auto 18px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ffd6ec, #ff9bcf, #ff5fa2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.34), 0 0 24px rgba(255,95,162,0.22); } .profile-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.92); } .info-text { color: cornsilk; margin-bottom: 24px; } .info-text p { margin: 0; text-shadow: -1px -1px 0 rgba(0,0,0,0.92), 1px -1px 0 rgba(0,0,0,0.92), -1px 1px 0 rgba(0,0,0,0.92), 1px 1px 0 rgba(0,0,0,0.92), 0px 2px 8px rgba(0,0,0,0.32); } .info-text p:first-child { font-size: 19px; font-weight: 800; margin-bottom: 4px; } .info-text p:last-child { font-size: 16px; font-weight: 700; opacity: 0.98; } .link-btn { display: flex; align-items: center; width: 100%; height: 64px; margin-bottom: 14px;
background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 50px; color: cornsilk; text-decoration: none; cursor: pointer; transition: all 0.22s ease; box-shadow: 0 10px 26px rgba(0,0,0,0.20); overflow: hidden; position: relative; } .link-btn:hover { background: rgba(255, 255, 255, 0.96); transform: translateY(-1px) scale(1.02); } .btn-icon { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-left: 6px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); } .btn-content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; margin-left: -58px; pointer-events: none; } .btn-main-text { font-size: 17px; font-weight: 800; text-shadow: -1px -1px 0 rgba(0,0,0,0.94), 1px -1px 0 rgba(0,0,0,0.94), -1px 1px 0 rgba(0,0,0,0.94), 1px 1px 0 rgba(0,0,0,0.94), 0px 2px 8px rgba(0,0,0,0.35); } .btn-sub-text { font-size:
11px; font-weight: 600; margin-top: 1px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.3px; } .link-btn:hover .btn-main-text, .link-btn:hover .btn-sub-text { color: black; text-shadow: none; opacity: 1; } .ads { margin-top: 20px; text-align: center; display: flex; justify-content: center; align-items: center; } .ads iframe { max-width: 100%; } .promo-container { margin-top: 20px; cursor: pointer; text-align: center; } .banner-text { font-size: 16px; color: cornsilk; opacity: 0.75; animation: breathe var(--breath-speed) ease-in-out infinite; } #feedback { margin-top: 20px; font-weight: 700; color: #86efac; height: 24px; text-shadow: 0 2px 6px rgba(0,0,0,0.3); } .footer-bottom { position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 13px; color: cornsilk; opacity: 0.6; line-height: 1.4; } @media (max-height: 640px) { .profile-container { margin-bottom: 24px; } .avatar-ring { width: 118px; height: 118px; } .link-btn { height: 56px; } .btn-icon { width:
46px; height: 46px; } .btn-main-text { font-size: 15px; } .btn-sub-text { font-size: 10px; } }