@font-face{font-family:'Ubuntu';src:url(Ubuntu.ttf) format('truetype');font-weight:normal;font-style:normal;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background-image:url('https://bing.img.run/rand_1366x768.php');background-size:cover;background-position:center;min-height:100vh;font-family:'Ubuntu',sans-serif;position:relative;overflow:hidden;}
body::after{content:'';position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.2);backdrop-filter:blur(10px);opacity:0.9;z-index:-1;}
.content-container{font-family:'Ubuntu',sans-serif;position:absolute;top:30px;left:30px;}
.profile-pic{width:250px;height:250px;border-radius:50%;object-fit:cover;border:10px solid #ccc;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:avatarFlyIn 2.2s cubic-bezier(0.68,-0.55,0.265,1.55) forwards;opacity:0;transform:translateX(-150%) rotate(-360deg);}
.profile-title{font-family:'Ubuntu',sans-serif;color:#ccc;font-size:2.5rem;font-weight:bold;text-shadow:2px 2px 8px rgba(0,0,0,0.5);animation:titleFlyIn 2s cubic-bezier(0.68,-0.55,0.265,1.55) 0.3s forwards;opacity:0;transform:translateX(-150%);margin-top:15px;}
.profile-subtitle{font-family:'Ubuntu',sans-serif;color:#ccc;font-size:1.2rem;text-shadow:1px 1px 4px rgba(0,0,0,0.5);animation:subtitleFlyIn 1.8s cubic-bezier(0.68,-0.55,0.265,1.55) 0.6s forwards;opacity:0;transform:translateX(-150%);}
.music-btn{position:fixed;top:30px;right:30px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:all 0.3s ease;animation:pulse 2s ease-in-out infinite;font-family:'Ubuntu',sans-serif;}
.music-btn:hover{transform:scale(1.1);background:white;}
.projects-container{position:fixed;bottom:180px;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding:0 20px;opacity:0;transform:translateX(150%);animation:slideInFromRight 2s cubic-bezier(0.68,-0.55,0.265,1.55) 1.5s forwards;}
.project-btn{font-family:'Ubuntu',sans-serif;padding:12px 25px;background:rgba(255,255,255,0.8);border:none;border-radius:30px;color:black;font-size:1rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2);white-space:nowrap;}
.project-btn:hover{background:white;transform:translateX(-5px);box-shadow:0 6px 20px rgba(0,0,0,0.3);}
.social-container{position:fixed;bottom:120px;right:0;display:flex;gap:15px;padding:0 20px;opacity:0;transform:translateX(150%);animation:slideInFromRight 2s cubic-bezier(0.68,-0.55,0.265,1.55) 2s forwards;}
.social-btn{width:100px;height:50px;border-radius:30px;background:rgba(255,255,255,0.8);border:none;color:black;font-size:1.3rem;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.2);font-family:'Ubuntu',sans-serif;}
.social-btn:hover{background:white;transform:translateX(-5px) scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,0.3);}
.quote-container{position:fixed;bottom:30px;right:0;text-align:right;padding:0 20px;opacity:0;transform:translateX(150%);animation:slideInFromRight 2s cubic-bezier(0.68,-0.55,0.265,1.55) 2.5s forwards;}
.quote-text{font-size:1.1rem;color:black;text-shadow:1px 1px 3px rgba(0,0,0,0.3);max-width:500px;line-height:1.5;padding:15px 20px;background:rgba(255,255,255,0.8);border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.2);font-family:'Ubuntu',sans-serif;white-space:pre-line;}
@keyframes avatarFlyIn{0%{opacity:0;transform:translateX(-150%) rotate(-360deg) scale(0.1);}60%{opacity:0.8;transform:translateX(20%) rotate(180deg) scale(1.1);}80%{transform:translateX(-5%) rotate(10deg) scale(0.95);}100%{opacity:1;transform:translateX(0) rotate(0) scale(1);}}
@keyframes titleFlyIn{0%{opacity:0;transform:translateX(-150%);}70%{opacity:0.9;transform:translateX(15%);}85%{transform:translateX(-3%);}100%{opacity:1;transform:translateX(0);}}
@keyframes subtitleFlyIn{0%{opacity:0;transform:translateX(-150%);}65%{opacity:0.8;transform:translateX(10%);}100%{opacity:1;transform:translateX(0);}}
@keyframes slideInFromRight{0%{opacity:0;transform:translateX(150%);}70%{opacity:0.9;transform:translateX(-15%);}85%{transform:translateX(3%);}100%{opacity:1;transform:translateX(0);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@media (max-width:768px){.content-container{top:20px;left:20px;}.profile-pic{width:100px;height:100px;}.profile-title{font-size:2rem;}.music-btn{top:20px;right:20px;width:50px;height:50px;font-size:1.2rem;}.project-btn{padding:10px 20px;font-size:0.9rem;}.social-btn{width:80px;height:45px;font-size:1.2rem;}.quote-text{font-size:1rem;max-width:300px;}}