:root{--border-radius:0.4rem;--spacing:1rem;--spacing-lg:1.4rem;--spacing-sm:0.4rem;--background:#0a0a0a;--foreground:#ededed;--accent-1:197,71%,73%;--accent-2:249,80%,67%;--white:255,255,255;--black:0,0,0}body,html{max-width:100vw}::placeholder{font-size:1rem;opacity:1}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.flex-column,.heading{flex-direction:column}.start{gap:var(--spacing-lg)}.heading{height:80vh;text-align:center;gap:var(--spacing);background:transparent;& button{background:rgba(255,255,255,.12)}}*{box-sizing:border-box;padding:0;margin:0}a{color:inherit;text-decoration:none}p{padding:var(--spacing) 0}.searchbar,footer,header{-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);background:rgba(0,0,0,.6)}.full-width,header .playing{max-width:1300px;width:100%}header{& .album-art{width:250px;height:250px}.spotify{display:none}justify-content:center;& iframe{margin:var(--spacing);max-width:700px;border-radius:1rem;background:transparent}& .playing{& h2{transform:translateY(-1rem);margin-bottom:var(--spacing-lg);text-align:center}background-size:cover!important;background-position:50%!important;& .audio-backdrop{padding:calc(var(--spacing-lg) * 2) var(--spacing-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(to bottom,var(--background) 10%,rgba(0,0,0,.4))}& .audio-caption{justify-content:center;flex-direction:row-reverse;margin-top:var(--spacing);font-size:1.4rem;& .audio-details{max-width:400px}& .title{font-weight:700;font-size:1.8rem}}}}.audio-caption img,.rounded{border-radius:var(--border-radius)}.playlist-wrapper>div:hover{cursor:pointer}footer:has(.spotify){justify-content:start;gap:var(--spacing-lg);& .controls{margin-left:var(--spacing)}}footer{& .playing{background:none!important}.audio-details{width:150px;& *{width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}}.button,button{cursor:pointer;border:0;color:white;font-size:1rem;border-radius:var(--border-radius);background:transparent;transition:.6s;box-shadow:0 0 0 0 rgba(255,255,255,.2)}.button{display:block;background:rgba(255,255,255,.12)}.button:hover,button:hover{box-shadow:0 0 0 10px transparent;background:rgba(255,255,255,.12)}.end-of-results{padding:var(--spacing-lg);flex-direction:column;gap:var(--spacing);& button{margin-right:auto;border:1px solid rgba(255,255,255,.2)}}.playlist-item:not(:has(.audio-details)){display:none}header .audio-caption img{width:250px;border-radius:50%}.title:empty:before{content:"Untitled"}.audio-caption{gap:var(--spacing-lg);& .audio-details{display:flex;flex-direction:column;align-items:flex-start}& img{width:70px}}.button,.playlist-wrapper .audio-caption,.searchbar,button,footer{padding:var(--spacing)}nav{gap:var(--spacing-lg)}.not-found{font-size:1.2rem;padding:var(--spacing-lg)}.playlist-wrapper{& blockquote .tmblr-full:not(:first-of-type){display:none}& .audio-caption{justify-content:flex-end;gap:var(--spacing);flex-direction:row-reverse;& .album-art{height:70px;background:rgba(255,255,255,.08);border-radius:var(--border-radius)}}}.searchbar{position:-webkit-sticky;position:sticky;top:0;gap:var(--spacing-lg);justify-content:flex-start;z-index:1;& form{width:90%;max-width:700px}& input{width:100%;color:white;background:rgba(var(--white),.12);padding:var(--spacing) var(--spacing-lg);border-radius:var(--spacing);border:0}}.playlist-item{position:relative;overflow:hidden;transition:.6s ease-in-out;box-shadow:inset 0 0 0 0 rgba(var(--black),.2);&:not(.active):hover{background:linear-gradient(to right,hsla(var(--accent-1),.08),hsl(var(--accent-2),.08))}}.click{position:absolute;width:10px;z-index:-1;height:10px;border-radius:50%}.pulse{animation:pulse 1s 1 forwards}.active{position:relative;transition:all .6s;background:linear-gradient(to right,hsla(var(--accent-1),.24),hsla(219,79%,66%,.24))}footer iframe{display:none}@keyframes pulse{0%{background:hsla(178,60%,84%,.4)}to{transform:scale(50);background:hsla(219,79%,66%,0)}}footer{justify-content:space-between;position:-webkit-sticky;position:sticky;bottom:0;& .audio-caption{flex-direction:row-reverse;justify-content:flex-end;& .title{font-weight:700;font-size:1.12rem}}}.audio-caption,.flex-wrap{display:flex;flex-wrap:wrap}.align-center,.audio-caption{align-items:center}.justify-center{justify-content:center}.blog-card{text-align:center;width:100vw;padding-bottom:var(--spacing-lg);margin-bottom:var(--spacing-lg);flex-direction:column}.blog-card .header{position:relative;transform:translateY(-1rem);background-size:cover;background-position:50%;align-items:flex-end;aspect-ratio:5/1;& h1{position:absolute;align-self:center;text-align:center}& img{transform:translateY(3rem)}}.error{width:50vw;text-align:center;gap:1rem;padding:var(--spacing);background:hsla(0,67%,51%,.241)}.controls{& .progress-container{gap:var(--spacing);padding:0 var(--spacing-lg);margin-right:var(--spacing)}& .progress-container input{width:30vw}& button{padding:var(--spacing);border-radius:50%}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:15rem;accent-color:skyblue;transition:.6s}::-moz-range-progress,::-webkit-progress-value{-webkit-transition:.6s;-moz-transition:.6s;transition:.6s;background-color:#eee;background:linear-gradient(to bottom right,mediumslateblue,#beefed);border-radius:var(--spacing)}input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.08);border-radius:var(--spacing)}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:var(--spacing);background:linear-gradient(to bottom right,hsl(var(--accent-2),.4),hsla(178,96%,80%,.4))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;background:white;width:16px;border-radius:50%;margin-top:-4px}input[type=range]:focus{outline:none}.sr-text{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.playing-audio,header img{transition:all .6s}header img{animation:rotate 1s 1 forwards}@keyframes rotate{0%{transform:rotate(100deg)}to{transform:rotate(0)}}.playing-audio{animation:playing 10s linear infinite}@keyframes playing{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}.lds-ellipsis,.lds-ellipsis div{box-sizing:border-box}.lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33.33333px;width:13.33333px;height:13.33333px;border-radius:50%;background:currentColor;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}@media screen and (max-width:670px){.blog-card .header{aspect-ratio:2/1}.controls,.searchbar{justify-content:center}.searchbar{position:relative}nav{padding:var(--spacing)}.progress-container input{width:60vw!important}.progress-container span{display:none}.audio-details{width:calc(100% - 100px)!important}header .audio-details{text-align:center}footer{justify-content:center;align-items:center;flex-direction:column}.album,.artist,footer .audio-details span,footer .playing,header .title{width:100%}}