.song-container{background-color:#000;border:1px solid grey;padding:30px}.audio-player{background-color:#282c34;border:1px solid #fff;border-radius:10px;overflow:hidden;width:100%}.audio-player,.play-button{align-items:center;display:flex;height:60px;position:relative}.play-button{cursor:pointer;justify-content:center;width:60px}.play-button i{color:#fff;font-size:36px}.progress-bar{align-items:center;color:#fff;cursor:pointer;display:flex;flex-grow:1;font-size:14px;height:100%;overflow:hidden;padding:0 10px;position:relative}.progress-bar .progress{background:linear-gradient(180deg,#58afd1,#dd5074);border-radius:0;height:100%;left:0;position:absolute;top:0;transition:width .1s linear;width:0;z-index:1}.progress-bar .progress:after{background-color:#fff;content:"";height:100%;position:absolute;right:0;top:0;width:2px}.progress-bar span{left:12px;position:absolute;text-align:left;white-space:break-spaces}.frequency-bars{display:flex;gap:4px;height:40px;pointer-events:none;position:absolute;right:12px;z-index:3}.bar{animation:bounce 1s ease-in-out infinite;background:#fff;position:relative;width:4px}@keyframes bounce{0%,to{height:5px;top:30px}50%{height:30px;top:5px}}.bar:nth-child(2){animation:bounce 2s ease-in-out infinite;animation-delay:.2s}.bar:nth-child(3){animation:bounce .7s ease-in-out infinite;animation-delay:.3s}.bar:nth-child(4){animation:bounce 1s ease-in-out infinite;animation-delay:.1s}.bar:nth-child(5){animation:bounce 1.1s ease-in-out infinite;animation-delay:.8s}.frequency-bars.hidden{display:none}.play-circle{border:2px solid #fff;border-radius:50%;height:37px;padding-left:12px;padding-top:5px;width:37px}.blocker{background-color:#000;background-color:rgba(0,0,0,.75);bottom:0;box-sizing:border-box;height:100%;left:0;overflow:auto;padding:20px;position:fixed;right:0;text-align:center;top:0;width:100%;z-index:1}.blocker:before{content:"";display:inline-block;height:100%;margin-right:-.05em;vertical-align:middle}.blocker.behind{background-color:transparent}.modal{background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;box-sizing:border-box;display:none;max-width:500px;padding:15px 30px;position:relative;text-align:left;vertical-align:middle;width:90%;z-index:2}.modal a.close-modal{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==);background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:30px;position:absolute;right:-12.5px;text-indent:-9999px;top:-12.5px;width:30px}.modal-spinner{background-color:#111;border-radius:5px;display:none;height:20px;left:50%;padding:12px 16px;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%)}.modal-spinner>div{-webkit-animation:sk-stretchdelay 1.2s ease-in-out infinite;animation:sk-stretchdelay 1.2s ease-in-out infinite;background-color:#fff;border-radius:100px;display:inline-block;height:20px;margin:0 1px;width:2px}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.modal-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{-webkit-transform:scaleY(.5)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.5);-webkit-transform:scaleY(.5)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}