.music-player{z-index:10;position:fixed;top:3%;right:0;transform:translateY(-50%);background-color:hsla(0,0%,100%,0);padding:10px;opacity:.01;transition:.3s ease-in-out}.music-player:hover{opacity:1}.controls button{margin-right:5px}.music-player:hover>.sidebar{transform:translateX(0)}.sidebar{color:#fff;z-index:10;transform:translateX(330px);transition:transform 1.2s ease;width:365px;background:rgba(230,0,105,.4);text-shadow:0 0 10px #03bcf4,0 0 20px #03bcf4,0 0 40px #03bcf4,0 0 80px #03bcf4,0 0 160px #03bcf5;padding:20px;top:50px;display:block;border-radius:10px;position:fixed}.song-list{list-style:none;padding:0;margin:0}.song-list li{cursor:pointer;padding:5px 0}.song-list li.active{font-weight:bolder}*{margin:0;padding:0;background-attachment:fixed}a,body,div,h1,h2,h3,html,input,li,ol,p,span,strong,table,td,tr,ul{list-style:none;border-spacing:0;border:0;border-collapse:collapse;text-decoration:none;padding:0;margin:0;scroll-snap-type:none}#left_navigation{position:fixed;top:20px;left:1px;z-index:6}#left_navigation:hover{animation-play-state:paused}#left_navigation a{align-items:center;text-decoration:none}.navigation{width:1vw;height:60vh;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:#d0daec;border-radius:7px;transition:.3s;overflow:hidden;opacity:.01;animation:animate 10s ease-in-out infinite}@keyframes animate{88.1%{opacity:1}18.1%,20.1%,50.1%,60%,65.1%,80%,90.1%,to{box-shadow:0 0 10px #03bcf4,0 0 20px #03bcf4,0 0 40px #03bcf4,0 0 80px #03bcf4,0 0 160px #03bcf5}}.navigation:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,red,transparent);transform:scaleX(0);transition:transform .3s ease-in-out}.navigation:hover:before{transform:scaleX(1)}.box{display:block;height:12%;width:85%;margin:10px;padding-right:10px;padding-bottom:10px;border-radius:10px;position:relative;transition:.3s;color:#a0a0af}.box:first-child:before,.box:nth-child(5):before{content:"";display:block;width:100%;height:3px;background:linear-gradient(90deg,transparent,#0f62e7,transparent);position:absolute;bottom:-10px}.box span{position:relative;top:22px;left:40px;font:250 20px ;opacity:0;transition:.3s}.navigation:hover{width:14vw;height:80vh;left:5px;opacity:.9;transition:.3s}.box:hover{background-color:#bcc9de;font-weight:700;transition:.4s;color:#fff;text-shadow:0 0 10px #03bcf4,0 0 20px #03bcf4,0 0 40px #03bcf4,0 0 80px #03bcf4,0 0 160px #03bcf5}.box:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1px;background-color:#0f62e7;transition:width .4s ease-in-out}.box:hover:after{width:90%}.navigation:hover span{opacity:1}.navigation:nth-child(2){background-color:#f3f4f6}.navigation:nth-child(2) .box:hover{background-color:#d1d5db;color:#f19f9f}.navigation:nth-child(2) .box{color:#e3a5a5}.navigation:nth-child(3){background-color:#312e81}.navigation:nth-child(3) .box:hover{background-color:#7d76d9}.navigation:nth-child(3) .box{color:#9a8fd5}::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}::-webkit-scrollbar{-webkit-appearance:none;width:6px;height:6px}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.15);-webkit-transition:color .2s ease;transition:color .2s ease}