.header-container{justify-content:space-between;padding:10px 20px;background:rgba(0,0,0,.336);box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,0);position:fixed;top:0;width:100%;z-index:10}.header-container,.logo{display:flex;align-items:center}.logo{gap:10px}.logo-icon{width:40px;height:40px;border-radius:50%}.logo-text{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.5)}.nav-buttons{display:flex;gap:15px}.nav-button{padding:8px 15px;background:hsla(0,0%,100%,.3);color:#fff;font-size:1rem;font-weight:500;border:1px solid hsla(0,0%,100%,.5);border-radius:5px;backdrop-filter:blur(5px);cursor:pointer;transition:background .3s,transform .2s}.nav-button:hover{background:hsla(0,0%,100%,.5);transform:scale(1.05)}.nav-button:active{transform:scale(.95)}.users-conected{position:relative;cursor:pointer}.submenu{position:absolute;top:40px;left:0;background:rgba(0,0,0,.7);border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,.2);display:flex;flex-direction:column;padding:10px;z-index:1000;backdrop-filter:blur(5px)}.submenu button{background:none;color:#fff;border:none;padding:10px 20px;text-align:left;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s,transform .2s;backdrop-filter:blur(3px)}.submenu button:hover{background-color:hsla(0,0%,100%,.2);transform:scale(1.05)}.submenu button:active{transform:scale(.95)}.submenu .logout-btn{background-color:rgba(255,77,77,.6);color:#fff}.submenu .logout-btn:hover{background-color:rgba(230,0,0,.2);transform:scale(1.05)}.submenu .logout-btn:active{background-color:rgba(204,0,0,.2);transform:scale(.95)}@media (max-width:768px){.logo-text{font-size:1.2rem}.nav-button{font-size:.9rem;padding:6px 12px}.submenu{top:35px}}.music-player,.play-pause-btn{display:flex;justify-content:center;align-items:center}.play-pause-btn{background-color:#58b4f2;color:#fff;border:3px solid #85bde2;box-shadow:0 0 10px #c0d2df62;padding:15px;font-size:18px;border-radius:50%;cursor:pointer;transition:background-color .3s,transform .2s ease-in-out}.play-pause-btn:hover{background-color:#c4476d}.play-pause-btn:active{transform:scale(.95)}.play-pause-btn:focus{outline:none}.users-conected{align-content:center}.menu-container{position:fixed;top:10%;bottom:10%;left:-250px;width:250px;background:rgba(0,0,0,.336);backdrop-filter:blur(10px);box-shadow:0 4px 30px rgba(0,0,0,.1);transition:left .3s ease-in-out;z-index:1;border-radius:0 10px 10px 0}.menu-container.open{left:0}.menu-toggle{position:absolute;top:50%;bottom:50%;right:-40px;width:40px;height:40px;background:rgba(0,0,0,.336);border:none;border-radius:0 10% 10% 0;cursor:pointer;font-size:1.5rem;color:#fff8f8;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all .3s ease}.menu-toggle:hover{background:hsla(0,0%,100%,.5);color:#000}.menu-content{padding:20px 0;color:#fff}.menu-content h2{margin:0 0 20px;font-size:1.5rem;text-align:center;color:#fff}.menu-content ul{list-style:none;padding:0;margin:0}.menu-content ul li{margin-bottom:10px}.menu-content ul li a{display:flex;align-items:center;text-decoration:none;font-size:1.2rem;color:#fff;background:hsla(0,0%,100%,.2);padding:10px;transition:background .3s}.menu-content ul li a:hover{background:hsla(0,0%,100%,.4)}.fontawesome,.menu-content ul li a img{width:24px;height:24px;margin-right:10px}