@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300&family=Quicksand&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{font-size:16px;all:unset;color:#fff;font-family:Poppins,sans-serif;font-weight:400}h1,h2,h3,h4,h5,h6{margin:0}h2{font-size:1.5em}h3{font-size:1.25em}h4{font-size:1em}.text-small{font-size:.8em}.text-faded{color:#dcdcdccc}.App{height:100vh}button{all:unset}*{box-sizing:border-box}.spotidash{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:0 5vw;position:relative;z-index:0;background-color:#191e28}.spotidash:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-image:var(--background);background-position:center;background-size:cover;opacity:.6;filter:blur(2vmin)}.spotidash>*{width:100%}.spotidash>.top{flex:1}.top{display:flex;flex-direction:column;justify-content:center;padding:1rem 0}.bottom{width:100%;max-width:640px;padding:1rem;display:flex;flex-direction:column;align-items:center}.bottom>*:not(:nth-last-child(1)){margin-bottom:1rem}.song{--picture-width: 420px;--picture-height: 420px;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;position:relative}.song>*:not(:nth-last-child(1)),.song>.song-details>*:not(:nth-last-child(1)){margin-bottom:1rem}.song>picture{--offset-x: calc(-50vw + 50% + var(--x) * 1px);--offset-y: calc(var(--y) * 1px - 1rem);width:var(--picture-height);height:var(--picture-width);display:block;position:absolute;transition:all .5s ease,opacity .25s ease;opacity:1;transform:translate(0)}.song>picture>img{object-fit:cover;height:100%;width:100%}.song>.song-details{opacity:1;transition:.25s ease;margin-top:var(--picture-height)}.song.is-small>picture{transform:translate(var(--offset-x),var(--offset-y));width:calc(var(--width) * 1px);height:calc(var(--height) * 1px)}.song.is-small>picture>img{object-fit:cover}.song.is-small>.song-details{opacity:0}.song.is-hidden>picture{opacity:0}.controls{--spacing: 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;opacity:0;transform:translateY(50%);pointer-events:none;transition:.5s ease}.controls>*:not(:nth-last-child(1)){margin-right:var(--spacing)}@media screen and (max-width: 640px){.controls{--spacing: .5rem}}.controls.is-active{opacity:1;transform:translateY(0);pointer-events:all}.control{--size: 3rem;border-radius:50%;cursor:pointer;width:var(--size);height:var(--size);background-color:#000c;display:flex;align-items:center;justify-content:center;color:#fff}.control.is-active{outline:3px solid white;outline-offset:1px}@media screen and (max-width: 640px){.control{--size: 14vw;font-size:80%}}.timeline-container{width:100%;display:flex;align-items:center;opacity:0;transform:translateY(50%);pointer-events:none;transition:.5s ease}.timeline-container>span{width:50px;margin-left:.5rem}.timeline-container>span:nth-child(1){text-align:right;margin-right:.5rem;margin-left:0}.timeline-container>.timeline{flex:1;height:.25rem;background-color:#000c;position:relative;display:flex;align-items:center;cursor:pointer}.timeline-container>.timeline:before{content:"";position:absolute;background-color:#fff;top:0;left:0;width:calc(100% / var(--duration) * var(--progress));height:100%}.timeline-container>.timeline:after{content:"";position:absolute;left:0;width:100%;height:calc(100% + 1rem);opacity:0}.timeline-container.is-active{opacity:1;transform:translateY(0);pointer-events:all}.background{--cols: 10;--rows: 10;--width: calc(100% / var(--cols));--height: calc(100% / var(--rows));display:flex;flex-wrap:wrap;width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:-1;background-color:#000}.background picture{width:var(--width);height:var(--height);position:relative;opacity:.5}.background picture>img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}