*{transition:opacity .3s ease-in-out,background-color .3s ease-in-out}*,body{box-sizing:border-box}body{font-family:Helvetica,Arial,sans-serif;text-align:center;display:flex;justify-content:center;background-color:#d2d2d2;background-image:url(asfalt-dark.7026dace.png);margin:0;font-size:16px}#app{height:100vh;padding:1rem;box-sizing:border-box;width:800px}.instructions{font-family:Decimal Black,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:700;font-size:1rem;color:#222;text-align:left;background:#eee;max-width:70%;margin:.5em auto 0;padding:1.2em;border-radius:3px;box-shadow:0 10px 10px rgba(0,0,0,.4)}.instructions.unsupported{font-size:1em;line-height:1.5em;padding:2em 1.2em 4em}.instructions .smaller{color:#888;font-size:.7em;line-height:1.5em;border:2px dashed #ccc;padding:1em}p:first-child{margin-top:0}p:last-child{margin-bottom:0}.album,.stack-album{font-family:Decimal Light,Helvetica,Arial,sans-serif;font-feature-settings:"smcp";text-transform:uppercase}.album{position:relative;background:#222;margin:-4rem auto 0;box-shadow:0 10px 10px rgba(0,0,0,.4);transform:perspective(3000px) rotateX(35deg) translateY(44px);width:70%}.album img{width:100%}.album:hover img{opacity:.8}.overlay{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;align-items:center;justify-content:center}.overlay .remove-album{opacity:0;cursor:pointer;position:absolute;top:.25em;right:.5em;font-weight:700;font-size:2em;text-shadow:0 0 5px rgba(0,0,0,.75)}.album:hover .remove-album{opacity:1}.overlay .controls{display:flex;align-items:center;justify-content:center;width:250px;height:250px;background:rgba(0,0,0,.1);border-radius:500px}.album:hover .overlay .controls{background:rgba(0,0,0,.4)}.remove-album{color:#fff}.overlay .album-label{position:absolute;text-align:left;top:1.5em;left:1.5em;font-size:1.5em}#play-pause.play{opacity:.8;position:absolute;margin-left:40px;border:58px dashed transparent;border-left:80px solid #fff;cursor:pointer}#play-pause.pause{opacity:.1;position:absolute;border-left:25px solid #fff;border-right:25px solid #fff;width:25px;height:85px;cursor:pointer;box-sizing:initial}.playing .album .controls{opacity:0}.playing .album:hover .controls{opacity:1}.album:hover #play-pause{opacity:.8}.shelf{position:relative;width:100%;height:1.5rem;border-radius:4px;background:linear-gradient(#333,#444 8%,#111);box-shadow:0 3px 8px rgba(0,0,0,.5)}#drop{position:fixed;top:0;left:0;z-index:9999999999;width:100%;height:100%;background-color:rgba(0,100,200,.3);visibility:hidden;opacity:0}#drop.active{visibility:visible;opacity:1}.stack-album{color:#fff;font-size:.8rem;overflow:hidden;max-height:1rem;box-sizing:initial;text-align:left;background:linear-gradient(#222,#333,#222);text-shadow:0 0 7px #000;border-radius:5px;margin:0 auto;max-width:60rem;padding:4px 6px;position:relative;box-shadow:0 3px 10px rgba(0,0,0,.5);width:90%}.stack-album .album-info{display:flex;justify-content:space-between}.stack:hover .album-info{opacity:0}.stack-album .controls{text-align:right;font-size:2em;position:absolute;top:-3px;left:0;right:5px;bottom:0;opacity:0}.stack-album:hover .controls{opacity:.8;cursor:pointer}.stack-album .album-title{max-width:80%;overflow:hidden}.stack-album .album-artist{text-align:right;overflow:hidden}.stack-album .album-art{background-position:50%;background-size:cover;box-shadow:inset 0 0 20px rgba(0,0,0,.4);border-radius:5px;position:absolute;top:0;left:0;right:0;bottom:0;opacity:.5}@media (min-width:768px){.instructions{font-size:1.5rem;margin:2em auto 0}}