.page{background-color:#e8cde4;justify-content:center;align-items:center;min-height:100vh;display:flex}.player{text-align:center;text-align:center;width:330px;height:480px;padding:15px;position:relative}.song-title{color:#7d466d;z-index:3;width:100%;margin:0;font-size:20px;position:absolute;top:30px;left:0}.cover{object-fit:cover;z-index:1;width:310px;height:280px;position:absolute;top:62px;left:22px}.controls button{cursor:pointer;background-color:#0000;border:none;margin:5px;padding:0}.progress{z-index:3;align-items:center;gap:5px;width:280px;display:flex;position:absolute;top:350px;left:40px}.progress span{color:#7d466d;font-size:12px}.progress input{appearance:none;cursor:pointer;background:#ebb1b3;border-radius:10px;flex:1;height:10px}.progress input::-webkit-slider-thumb{appearance:none;cursor:pointer;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAMnSURBVDhPdVNNaBVXFD73b+bOm/eTwWhiE4wLLfJUBJUKKdFAsNB0Y+iihbrwh+CmigtXiooouHPhQjfSvyxK6LIksdBUqDZtiYtoG1ONYoh5ie/FiO9NZt68vJm5nvuMKcHnNxyGe893vnPuOfcSqAMOwNZLq3NTy4bvOGNiwfVvP5ybP+yBt7hMWQW6/F8FRSmP7URq965tzrkLx9ckLTMlIDLQVTdpPTDHsruO9xyYWxj/JQ4mB9RvP17zd7a2/YS+5BvKarxTicAqGiyZtKRIJaRBGCFg48IWMpUBs241jAMXKUilJUjToEYik7H39nR23Dhz/liDzRYJUSGsbUzRTdlsy72/x7JBybslIcNMbkpucVFF8FYn/cnmdR9cx4SGUkqnMVCuwcYqSOyDwkycUqzGsJx0pnvnh/Z9QDIootygMjIRFnrJyc975k5f+LpJMAYQx+gDPEIENtWD0BJvECoBfmzrJDoTWSoW1ejAr8HFb38epIRSzExI2nBJWrgkw11Icg/D/hfQ4KQK2qc5aMjxCWeURkA5W5hfePwy93L/no6PLAOWQKkI47VAvWnGQFQMlaIHI0Ojlcs/3ByeyOd6WakSTD3N5SeKucL+Pe1Zy9THei8ICvjwx827lYvfDw2P5qaPuEFQYLFSoVcOpqam5h+WCqXu9o7tBo55OWg1dDPuTT4Lz17p//3uzPShMgro7Ro7UlHVq/puuVzRyxUQnMJb01D4hVEMflCpooBb20LURCilTFpSCs5WOoGh2BoMWzYtFJV8KD+aBck4zZimWaMhdAPwhib2fdn18Tenzx10kobACwawhM2bH3sC7swLCF0frMYMMCmgqdmhrVK2jE/ObnlVKg5WkYoPtiYnDM5SSSmILq1cXNTNq17tv+VFOI1sWzM/1fuZvW7rRiKEgIRpCEZoQsdqcK1io1WLnir89R/eBwoPnj6vXOobGh7Lzx3jnIf/5p+34/FunPii02GYUfcFsdJ9gm+HN1tO15bWxj5TcBPLikrl8p//zM4cfRUEeU1ijMn1Dc6nO5pqz0NGcRy+KJbuPJid/soDWHwNGFg8uePWkXMAAAAASUVORK5CYII=) 50%/contain no-repeat;border:none;width:20px;height:20px}.progress input::-moz-range-thumb{cursor:pointer;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAMnSURBVDhPdVNNaBVXFD73b+bOm/eTwWhiE4wLLfJUBJUKKdFAsNB0Y+iihbrwh+CmigtXiooouHPhQjfSvyxK6LIksdBUqDZtiYtoG1ONYoh5ie/FiO9NZt68vJm5nvuMKcHnNxyGe893vnPuOfcSqAMOwNZLq3NTy4bvOGNiwfVvP5ybP+yBt7hMWQW6/F8FRSmP7URq965tzrkLx9ckLTMlIDLQVTdpPTDHsruO9xyYWxj/JQ4mB9RvP17zd7a2/YS+5BvKarxTicAqGiyZtKRIJaRBGCFg48IWMpUBs241jAMXKUilJUjToEYik7H39nR23Dhz/liDzRYJUSGsbUzRTdlsy72/x7JBybslIcNMbkpucVFF8FYn/cnmdR9cx4SGUkqnMVCuwcYqSOyDwkycUqzGsJx0pnvnh/Z9QDIootygMjIRFnrJyc975k5f+LpJMAYQx+gDPEIENtWD0BJvECoBfmzrJDoTWSoW1ejAr8HFb38epIRSzExI2nBJWrgkw11Icg/D/hfQ4KQK2qc5aMjxCWeURkA5W5hfePwy93L/no6PLAOWQKkI47VAvWnGQFQMlaIHI0Ojlcs/3ByeyOd6WakSTD3N5SeKucL+Pe1Zy9THei8ICvjwx827lYvfDw2P5qaPuEFQYLFSoVcOpqam5h+WCqXu9o7tBo55OWg1dDPuTT4Lz17p//3uzPShMgro7Ro7UlHVq/puuVzRyxUQnMJb01D4hVEMflCpooBb20LURCilTFpSCs5WOoGh2BoMWzYtFJV8KD+aBck4zZimWaMhdAPwhib2fdn18Tenzx10kobACwawhM2bH3sC7swLCF0frMYMMCmgqdmhrVK2jE/ObnlVKg5WkYoPtiYnDM5SSSmILq1cXNTNq17tv+VFOI1sWzM/1fuZvW7rRiKEgIRpCEZoQsdqcK1io1WLnir89R/eBwoPnj6vXOobGh7Lzx3jnIf/5p+34/FunPii02GYUfcFsdJ9gm+HN1tO15bWxj5TcBPLikrl8p//zM4cfRUEeU1ijMn1Dc6nO5pqz0NGcRy+KJbuPJid/soDWHwNGFg8uePWkXMAAAAASUVORK5CYII=) 50%/contain no-repeat;border:none;width:20px;height:20px}.frame{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.controls{z-index:3;background-color:#0000;border-radius:10px;justify-content:center;align-items:center;gap:20px;width:300px;margin:0;padding:8px;display:flex;position:absolute;top:380px;left:23px}.controls img{display:block}.previous img,.next img{width:65px}.play img{width:75px}@media (width<=500px){.total{transform:scale(.85)}}@media (width<=320px){.total{transform:scale(.8)}}