:root{background-color:#232323;--primary-white: rgba(255, 255, 255, .85);--primary-white-hover: rgba(255, 255, 255, 1);--container-bg: rgba(98, 98, 98, .4);--border-color: #ffffff;--transition-fast: .3s ease;--transition-medium: .5s ease-in-out}.main-container{opacity:0;position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background-color:var(--container-bg);padding:90px;width:350px;height:400px;display:flex;border-radius:10px;justify-content:space-between;align-items:center;border:2px solid var(--border-color);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity var(--transition-medium),transform var(--transition-medium),background-color var(--transition-medium);will-change:opacity,transform}.main-container.entered{opacity:1}.pfp{width:100px;height:100px;border-radius:50%;object-fit:cover;position:fixed;margin-right:10px;transform:translate(120px);top:15px;border:2px solid #000000;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.pfp:hover{transform:translate(120px) scale(1.02);box-shadow:0 0 15px #ffffff4d}.name{margin-left:10px;font-weight:600;position:fixed;font-size:22px;margin-right:10px;transform:translate(124.4px);top:110px;color:var(--primary-white-hover);font-family:Poppins,sans-serif;transition:color var(--transition-fast)}.name:hover{color:var(--primary-white-hover)}.name:hover:before{content:"UID 0";position:absolute;background-color:#020202;color:#fff;padding:5px;border-radius:5px;top:3px;left:150%;transform:translate(-50%);font-size:14px;white-space:nowrap;width:50px;text-align:center;font-family:Noto Sans,sans-serif}.view{position:fixed;width:25px;height:25px;margin-right:10px;transform:translate(400px);top:16.3px;transition:opacity var(--transition-fast)}.view:hover{opacity:.8}.num:hover:before{content:"Profile Views";position:absolute;background-color:#020202;color:#fff;padding:5px;border-radius:5px;top:22px;left:150%;transform:translate(-65%);font-size:14px;white-space:nowrap;width:103px;text-align:center;font-family:Noto Sans,sans-serif}.num{font-family:Roboto,sans-serif;font-weight:500;color:var(--primary-white-hover);font-size:14px;position:fixed;width:20px;height:20px;margin-right:8px;transform:translate(364px);top:21px;transition:color var(--transition-fast)}.num:hover{color:var(--primary-white-hover)}.bio{position:fixed;font-size:14px;left:50%;transform:translate(-50%);top:160px;color:var(--primary-white);font-family:Inter,Roboto,sans-serif;font-weight:400;letter-spacing:.3px;opacity:.9;transition:opacity var(--transition-fast),color var(--transition-fast);min-height:20px;display:inline-block;white-space:nowrap;text-align:center}.bio:hover{opacity:1;color:var(--primary-white-hover)}.bio.fade-in{animation:fadeIn .4s ease-in forwards}.bio.fade-out{animation:fadeOut .3s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-5px)}to{opacity:.9;transform:translate(-50%) translateY(0)}}@keyframes fadeOut{0%{opacity:.9;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(5px)}}.links{gap:.75rem;position:fixed;left:50%;transform:translate(-50%);top:200px;background-color:transparent;padding:5px;width:520px;height:50px;display:flex;border-radius:10px;justify-content:center;align-items:center}.link2{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.link2:hover{box-shadow:0 0 10px #fffc,0 0 20px #fff9,0 0 30px #fff6;transform:scale(1.05)}.div1{position:fixed;left:50%;transform:translate(-50%);top:276px;background-color:#fff;padding:1px;width:500px;height:1px;display:flex;justify-content:space-between;align-items:center}.background-image{position:fixed;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-1;pointer-events:none}.song{position:fixed;left:50%;transform:translate(-50%);top:279px;background-color:transparent;padding:5px;width:491px;height:161px;display:flex;flex-direction:row;align-items:flex-start;gap:20px}.songcover{background-color:#fff;padding:2px;width:110px;height:110px;position:relative;border-radius:10px;flex-shrink:0}.songinfo{display:flex;flex-direction:column;position:relative;flex:1;margin-top:0}.songtitle,.artist,.album{font-family:Rubik,sans-serif;color:#fff;display:block;margin:2px 0;transform:none;text-align:left}.songtitle{font-weight:500;font-size:15px}.artist{font-weight:400;font-size:13px;opacity:.9}.album{font-weight:400;font-size:12px;opacity:.8}.player-controls{position:absolute;top:120px;left:130px;right:20px;display:flex;align-items:center;gap:10px}.play-pause-btn{background:transparent;border:2px solid var(--border-color);border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary-white-hover);font-size:16px;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast);flex-shrink:0;padding:0;outline:none}.play-pause-btn:hover{transform:scale(1.1);box-shadow:0 0 10px #ffffff80;background-color:#ffffff1a}.play-pause-btn:active{transform:scale(.95)}.play-pause-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.play-pause-btn:disabled:hover{transform:none;box-shadow:none;background-color:transparent}.progress-wrapper{flex:1;display:flex;flex-direction:column;gap:5px}.progress-bar-container{position:relative;border-radius:10px;height:10px;background-color:transparent;border:2.5px solid black;overflow:hidden;cursor:pointer;transition:border-color var(--transition-fast)}.progress-bar-container:hover{border-color:#fffc}.progress-bar{height:100%;background-color:#fff;width:0;transition:width .1s linear;border-radius:10px;pointer-events:none}.time-label{font-size:13px;color:#ffffffd9;font-family:Poppins,sans-serif;font-weight:400;letter-spacing:.5px}.overlay{background:#000;position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;justify-content:center;align-items:center;color:var(--primary-white-hover);font-size:24px;cursor:pointer;z-index:9999;display:flex;transition:background-color var(--transition-fast)}.overlay:hover{background:#000000f2}.click{position:fixed;left:50%;transform:translate(-50%);top:360px;font-family:Inter,Roboto,sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:18px;opacity:.9;transition:opacity var(--transition-fast),transform var(--transition-fast),color var(--transition-fast);cursor:pointer;user-select:none;-webkit-user-select:none}.click:hover{opacity:1;transform:translate(-50%) translateY(-2px);color:var(--primary-white-hover)}.info{position:fixed;left:15%}
