:root{font-family:DM Sans,sans-serif}*{box-sizing:border-box;outline:none}html,body{width:100%;height:100vh;margin:0}body{background-color:#181a20;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;align-items:center;flex-direction:column}#root{display:flex;justify-content:center;align-items:center;width:100%;height:100%}button{background:transparent;border:none;cursor:pointer;padding:0;outline:none}img{width:100%;height:100%}.music-app{position:relative;background-color:#1f2128;width:320px;height:620px;border-radius:30px;box-shadow:0 0 2px #282a3547;overflow:hidden;display:flex;flex-direction:column}@media screen and (max-width:420px){.music-app{width:100%;height:100%;border-radius:0}}.cover{position:relative;width:100%;height:160px;background-image:url(https://images.unsplash.com/photo-1546707012-c46675f12716?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2249&q=80);background-size:cover;background-position:center -40px;padding-top:70px;background-repeat:no-repeat}.artist{position:absolute;left:50%;transform:translate(-50%,50%);bottom:0;width:80px;height:80px;border-radius:50%;background-image:url(https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80);background-size:cover;border:10px solid #1f2128}.cover-title{color:#fff;text-align:center}.cover-title p{margin:0}.title{font-size:24px;line-height:32px}.sub-title{font-size:14px;line-height:16px}.btn{color:#fff;background-position:center;background-repeat:no-repeat;background-size:contain}.btn-search{position:absolute;right:20px;top:20px;background-color:#1f2128;padding:8px 10px;border-radius:10px;color:#fff;transition:all .2s ease-in}.btn-search:hover{background-color:#2c2f39}.btn-all{color:#6343e4;margin-left:auto;font-size:12px;font-weight:500;transition:color .2s ease-in}.btn-all:hover{color:#886fea}.btn-add{color:#fff;margin-left:auto}.btn-next{color:#fff}.btn-back{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23424665' stroke='%23424665' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-skip-back'%3E%3Cdefs/%3E%3Cpath d='M19 20L9 12l10-8v16zM5 19V5'/%3E%3C/svg%3E")}.btn-repeat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-repeat' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath d='M17 1l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 01-4 4H3'/%3E%3C/svg%3E")}.btn-rewind,.btn-rewind-next{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23424665' stroke='%23424665' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-rewind'%3E%3Cdefs/%3E%3Cpath d='M11 19l-9-7 9-7v14zM22 19l-9-7 9-7v14z'/%3E%3C/svg%3E")}.btn-rewind-next{transform:rotate(180deg)}.btn-play-next{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23424665' stroke='%23424665' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-skip-back'%3E%3Cdefs/%3E%3Cpath d='M19 20L9 12l10-8v16zM5 19V5'/%3E%3C/svg%3E");transform:rotate(180deg)}.btn-list{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-list'%3E%3Cdefs/%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}.btn-volume-down{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23424665' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-volume-x'%3E%3Cdefs/%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6'/%3E%3C/svg%3E")}.btn-volume-up{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236343e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-volume-2'%3E%3Cdefs/%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07'/%3E%3C/svg%3E")}.content{flex:1;overflow:auto;height:calc(100% - 32px)}.content-header{padding:0 20px 6px;display:flex}.content-header:first-of-type{padding:30px 20px 0}.content-title{color:#fff;font-size:16px;font-weight:500}.playlist{padding:0;list-style-type:none}.list-item{display:flex;align-items:center;margin:0;padding:10px 20px;border-bottom:1px solid rgba(198,178,250,.1);cursor:pointer;background-color:#1f2128;transition:all .2s ease-in;overflow:auto}.list-item:hover{background-color:#282b33}.list-item-image{border-radius:10px;width:32px;height:32px;object-fit:cover;margin-right:16px}.info-title,.info-subtitle{color:#fff}.info-title{font-size:12px;line-height:18px;font-weight:500}.info-subtitle{font-size:10px;color:#59657c}.album-list{display:flex;align-items:flex-start}.album-wrapper{width:33.3%;text-align:center}.album-wrapper .info-title,.album-wrapper .info-subtitle{cursor:pointer}.album-wrapper .info-title:hover,.album-wrapper .info-subtitle:hover{opacity:.7}.album-cover{position:relative;width:60px;height:60px;border-radius:50%;cursor:pointer;transition:all .2s ease}.album-cover:hover{transform:scale(1.1)}.player{position:relative;width:100%;height:76px;bottom:0;background-color:#323542;padding:16px 20px;margin-top:auto}.player:hover .btn-extend{top:-16px;transition:all .3s ease}.player-top-content{display:flex;align-items:center}.buttons-wrapper{margin-left:auto;display:flex;align-items:center}.buttons-wrapper button:first-of-type{margin-right:24px}.proggress-part{display:flex;align-items:center;padding:6px 0}.time{display:inline-block;font-size:8px;line-height:12px;color:#fff}.time:first-of-type{color:#59657c}.proggres-bar{height:2px;width:100%;margin:0 8px;background-color:#1f2128;border-radius:2px;overflow:hidden}.progress{display:block;position:relative;width:40%;height:100%;background-color:#6343e4;border-radius:6px}.btn-extend{position:absolute;left:0;top:-12px;padding:12px 0;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#323542;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-chevron-up' width='' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");transition:all .3s ease}.btn-close,.btn-extend{width:100%;background-repeat:no-repeat;background-size:20px;background-position:center}.player-screen{position:absolute;top:0;transform:translateY(100%);z-index:2;background-color:#1f2128;height:100%;width:100%;padding:20px;transition:all .4s ease}.player-screen.active{top:0;transform:translateY(0);transition:all .4s ease}.btn-close{padding-top:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23536383' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-chevron-down' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}.top-text{display:block;color:#fff;font-size:12px;font-weight:600;text-align:center;margin-bottom:30px}.cover-wrapper{position:relative;border-radius:50%;width:100%;display:flex;justify-content:center}.cover-wrapper img{margin:0 auto;object-fit:cover;width:200px;height:200px;border-radius:50%}.cover-img{position:relative;z-index:2}.cover-shadow{position:absolute;top:0;left:50%;transform:translate(-46%);filter:blur(32px);width:100%;height:120px;z-index:1}.song-info{text-align:center}.song-info .song-title{color:#fff;font-weight:600}.song-info .song-subtitle{color:#59657c;font-size:12px}.player-screen .proggress-part{margin:0 auto;padding-top:30px;max-width:80%}.player-screen .proggres-bar{border-radius:6px;height:4px;background-color:#323542}.action-bar{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.action-bar .btn{width:24px;height:20px}.action-bar .btn-repeat{margin-right:16px}.action-bar .btn-list{margin-left:16px}.play-button{width:40px;height:40px;color:#fff;background-color:#6343e4;border-radius:12px;padding:4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play' fill='%23fff'%3E%3Cpath d='M5 3l14 9-14 9V3z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;box-shadow:0 0 5px 2px #5b3ede80}.sound-bar{display:flex;align-items:center;margin-top:24px}.sound-bar .btn{width:16px;height:16px}.volume{overflow:visible;cursor:pointer}.volume .progress:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background-color:#6343e4;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width:420px){.cover-wrapper img{width:150px;height:150px}.song-title{font-size:16px;margin:10px 0}.player-screen .proggress-part{padding-top:16px}.action-bar{margin-top:16px}.player{height:100px}.content{padding-bottom:32px}}