*{ margin:0; padding:0; box-sizing:border-box; font-family:"Arial",sans-serif; } html{ overflow-x:hidden; width:100%; max-width:100%; position:relative; } .profile-card{ transition:transform 0.2s ease,box-shadow 0.2s ease; will-change:transform; } body{ background-color:#000; color:#fff; min-height:100vh; padding:20px; font-size:16px; overflow-x:hidden; overflow-y:auto; width:100%; max-width:100vw; position:relative; margin:0;display:flex; justify-content:center; align-items:center; } .initial-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; z-index:9999; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:opacity 0.5s ease-out; animation:pulse 5s infinite; opacity:0.9; overflow:hidden; } .overlay-title{ color:#fff; font-size:60px; font-weight:bold; opacity:0.7; animation:pulse 2s infinite; margin-bottom:20px; } .overlay-subtitlez{ color:#fff; font-size:16px; opacity:0.7; margin-top:-12px; } .text-focus-in{ animation:text-focus-in 0.8s cubic-bezier(0.55,0.085,0.68,0.53) both; } .overlay-text.overlay-title{ filter:drop-shadow(0 0 8px rgba(0,138,218,0.8)); color:#da9500; } @keyframes text-focus-in{ 0%{ filter:blur(12px); opacity:0; } 100%{ filter:blur(0); opacity:1; } } initial-overlay.hidden{ opacity:0; pointer-events:none; } .background-video{ position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2; } @media (min-width:768px){ .OLD_TV{ position:fixed; top:0; left:0; right:0; bottom:0; opacity:1; z-index:-1; background:transparent url(https://assets.guns.lol/guns_dot.png) repeat 0 0; } } .background-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.249); z-index:-1; } .brave-audio-notification{ position:fixed; bottom:30px; right:30px; background:radial-gradient(circle at 100% -111%,rgba(13,162,255,0.445) 0,transparent 50%); color:white; padding:20px; border-radius:16px; box-shadow:rgba(0,0,0,0.3) 0 6px 30px; z-index:10000; max-width:380px; border:2px solid rgba(0,179,255,0.3); backdrop-filter:blur(10px); animation:0.4s ease-out 0s 1 normal none running slideIn; font-size:16px; } .profile-card{ background-color:rgba(30,32,34,0.708); border-radius:20px; width:100%; max-width:560px; overflow:hidden; box-shadow:0 4px 30px rgba(0,0,0,0.975); backdrop-filter:blur(10px); opacity:0; transform:scale(0.1); transition:opacity 0.5s,transform 0.5s; margin:0 auto; box-sizing:border-box; } .album-cover{ width:60px; height:60px; border-radius:10px; margin-right:10px; overflow:hidden; flex-shrink:0; } .album-cover img{ width:100%; height:100%; object-fit:contain; } .profile-card.animate{ opacity:1; transform:scale(1); } .banner-image{ width:100%; height:210px; object-fit:cover; } .profile-header{ padding:1px 25px; text-align:center; position:relative; } .logo-container{ width:112px; height:112px; border-radius:50%; margin:-80px auto 25px; border:5px solid rgba(30,30,30,0.466); backdrop-filter:blur(10px); overflow:hidden; position:relative; opacity:0; transform:scale(2); transition:opacity 0.5s,transform 0.5s; } .logo-container.animate{ opacity:1; transform:scale(1); transition-delay:0.2s; } .logo-image{ width:100%; height:100%; object-fit:cover; } .profile-title{ font-size:38px; margin-bottom:20px; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; margin-top:-30px; } .profile-title.animate{ opacity:1; transform:translateY(0); transition-delay:0.3s; } .profile-description{ font-size:18px; color:#ddd; margin-bottom:20px; max-width:90%; margin-left:auto; margin-right:auto; line-height:1.5; display:flex; align-items:flex-start; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; } .profile-description.animate{ opacity:1; transform:translateY(0); transition-delay:0.4s; } .verified{ color:#4ade80; margin-right:10px; flex-shrink:0; margin-top:3px; } .view-number{ margin-left:8px; opacity:0; transition:opacity 0.5s ease; } .view-counter.animate .view-number{ opacity:1 } .circle-buttons{ display:flex; justify-content:center; gap:20px; margin:15px 0; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; } .circle-buttons.animate{ opacity:1; transform:translateY(0); transition-delay:0.5s; } .circle-button{ width:56px;height:56px; border-radius:50%; background-color:#333; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:background-color 0.2s,transform 0.2s; } .circle-button:hover{ background-color:#444; transform:scale(1.1); } .circle-button svg{ width:28px; height:28px; } .user-info{ display:flex; align-items:center; padding:14px 20px; border-top:1px solid rgba(255,255,255,0.1); margin-top:14px; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; } .user-info.animate{ opacity:1; transform:translateY(0); transition-delay:0.6s; } .user-avatar{ width:56px; height:56px; border-radius:50%; margin-right:14px; object-fit:cover; } .user-details{ display:flex; flex-direction:column; } .user-name{ font-size:18px; font-weight:bold; display:flex; align-items:center; } .user-name img{ width:14px !important; height:14px !important; margin-left:7px !important; } .user-status{ font-size:16px; color:#aaa; } .music-player{ background:linear-gradient(135deg,rgba(0,97,243,0.1) 0,rgba(255,0,221,0.05) 100%); box-shadow:0 -1px 30px rgb(4,4,4); padding:20px; margin:20px; border-radius:14px; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; } .music-player.animate{ opacity:1; transform:translateY(0); transition-delay:0.7s; } .song-info{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .song-title{ font-size:18px; font-weight:bold; } .player-controls{ display:flex; align-items:center; gap:14px; } .control-button{ background:none; border:none; color:#aaa; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color 0.2s,transform 0.2s; } .control-button:hover{ color:#fff; transform:scale(1.1); } .control-button svg{ width:22px; height:22px; } .play-button{ width:42px; height:42px; border-radius:50%; background-color:#fff; color:#000; } .play-button:hover{ background-color:#eee; color:#000; } .progress-container{ background-color:#444; height:6px; border-radius:3px; margin-bottom:10px; cursor:pointer; position:relative; } .progress-bar{ background-color:#fff; height:100%; width:0; border-radius:3px; position:relative; } .time-display{ display:flex; justify-content:space-between; font-size:16px; color:#aaa; } .player-controls{ display:flex; align-items:center; gap:12px; margin:8px 0; } .control-button{ background:transparent !important; border:none; cursor:pointer; width:24px; height:24px; padding:0; margin:0; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; } .control-button svg{ width:24px; height:24px; stroke:#fff; transition:none; fill:none; background:transparent !important; } .control-button:hover{ transform:scale(1.1); background:transparent; } .control-button:active{ transform:scale(0.9); background:transparent; } .control-button.play-button{ width:auto; height:auto; background:transparent !important; } .action-buttons{ padding:0 20px 15px; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; } .action-buttons.animate{ opacity:1; transform:translateY(0); transition-delay:0.8s; } .action-button{ background:linear-gradient(135deg,#272727,#313131); color:#fff; border:none; border-radius:12px; margin-top:4px; padding:18px 24px; width:100%; margin-bottom:14px; cursor:pointer; font-size:18px; font-weight:bold; letter-spacing:0.5px; transition:all 0.3s ease; position:relative; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.2); } .action-button:hover{ background:linear-gradient(135deg,#1b1b1b4f,#131313); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.3); } .action-button:active{ transform:translateY(0); box-shadow:0 2px 10px rgba(0,0,0,0.2); } .action-button:first-child{ filter:drop-shadow(0 0 2.5px #0da2ff); } .action-button:nth-child(2){ filter:drop-shadow(0 0 2.5px #ff0db6); } .action-button:last-child{ filter:drop-shadow(0 0 2.5px #29ff0d); } .action-button::before{ content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; transition:0.5s; } .action-button:first-child::before{ background:linear-gradient(90deg,transparent,rgba(14,166,255,0.2),transparent); } .action-button:nth-child(2)::before{ background:linear-gradient(90deg,transparent,rgba(255,13,182,0.2),transparent); } .action-button:last-child::before{ background:linear-gradient(90deg,transparent,rgba(41,255,13,0.2),transparent); } .action-button:hover::before{ left:100%; } .view-counter{ padding:14px 20px; display:flex; align-items:center; font-size:18px;color:#aaa; opacity:0; transform:translateY(20px); transition:opacity 0.5s,transform 0.5s; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit--webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -moz--webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .view-counter.animate{ opacity:1; transform:translateY(0); transition-delay:0.9s; } .view-counter svg{ width:22px; height:22px; margin-right:7px; } @media (max-width:600px){ body{ padding:10px; overflow-x:hidden; } .profile-card{ max-width:100%; width:calc(100% - 10px); margin:0 auto; } .profile-title{ font-size:28px; } .profile-description{ font-size:16px; max-width:100%; } .circle-buttons{ gap:15px; } .circle-button{ width:48px; height:48px; } .action-button{ padding:14px; font-size:16px; } .music-player{ margin:15px 10px; } } @media (max-width:400px){ .circle-buttons{ gap:12px; } .circle-button{ width:42px;height:42px; } .player-controls{ gap:8px; } }