@font-face{font-family:Lazer84;src:local("Lazer84"),url(/static/media/Lazer84.2797715e72b392ade18c.ttf) format("truetype")}:root{--bg-color:#ddd;--cassette-bg:#333;--cassette-bg-shadow:#292828;--tape-color:#773838;--teeth:#ccc;--writing:#2b2baa;--cassette-green:#80bf82;--cassette-orange:#f5864f;--cassette-pink:#b86089;--cassette-purple:#8172c4;--cassette-blue:#72b4d7;--cassette-brown:#af8656}body{align-items:center;background:#ddd;background:var(--bg-color);display:flex;height:100vh;justify-content:center;margin:0;padding:0;width:100vw}*,:after,:before{box-sizing:border-box}#root{height:100vh;width:100vw}img.album{align-self:center;height:25%;margin-top:5%;width:25%}.main{display:flex;justify-content:space-around}.title{color:#292828;color:var(--cassette-bg-shadow);font-family:Lazer84,sans-serif;font-size:3rem;letter-spacing:.7rem;margin-bottom:20px;margin-top:20px;text-align:center;width:100%}.controls{align-items:center;display:flex;flex-direction:row;justify-content:center}audio{display:none;height:0;width:0}.player{background:#292828;background:var(--cassette-bg-shadow);height:80px;margin:auto 15%;width:250px}.control,.player{border-radius:10px}.control{background:#333;background:var(--cassette-bg);border-left:1px solid #ddd;border-left:1px solid var(--bg-color);cursor:pointer;height:50px;max-width:50px;outline:none;padding:0;text-decoration:none}.fa{color:#ddd;color:var(--bg-color);margin:18px}.control:hover{background:#1a1a1a}.progress{background:transparent;background:#ddd;background:var(--bg-color);position:relative;z-index:0}.progress,.progress .bar{height:6px;left:25px;max-width:200px;right:25px;top:11px}.progress .bar{background:transparent;cursor:pointer;pointer-events:none;width:0;z-index:-1}.progress .indicator{background:red;height:6px;height:100%;max-width:200px;pointer-events:none;position:absolute;top:0;width:100%;z-index:-2}.control.pushed{border-left:none;border-top:none;height:48px;width:52px}.control.pushed,.volume{background:#292828;background:var(--cassette-bg-shadow)}.volume{border-radius:10px;height:130px;left:20px;margin:20px auto auto -50px;overflow:hidden;width:50px}.vol-minus,.vol-plus{background:#333;background:var(--cassette-bg);border-left:1px solid #ddd;border-left:1px solid var(--bg-color);border-radius:10px;cursor:pointer;height:50px;max-width:50px;outline:none;padding:0;position:relative;text-decoration:none}.vol-plus{top:0}.vol-minus{top:-20px}p{color:#ddd;color:var(--bg-color);font-weight:700;justify-content:center;position:relative;text-align:center;top:-9px}@media screen and (min-width:990px){.cassette{order:2}img.album{max-height:40%;max-width:40%}}@media screen and (max-width:720px){.main{display:block;justify-content:center}.cassette{left:calc(50% - 250px);right:calc(50% - 250px)}img.album{height:60%;margin-left:20%;margin-right:20%;width:60%}}@media screen and (max-width:620px){.cassette{left:calc(50% - 250px);right:calc(50% - 250px)}}.cassette{align-items:center;background-color:#333;background-color:var(--cassette-bg);border-bottom:2px solid #222;border-radius:10px;border-top:2px solid #555;box-shadow:2px 2px 6px rgba(0,0,0,.5);display:flex;height:315px;justify-content:center;margin-top:7%;position:relative;width:500px}.cassette:before{border:5px solid transparent;border-right:5px solid var(--cassette-bg-shadow);left:-10px}.cassette:after,.cassette:before{bottom:30px;content:"";height:100px;position:absolute;width:5px}.cassette:after{border:5px solid transparent;border-left:5px solid var(--cassette-bg-shadow);right:-10px}.wheels-wrapper{align-items:center;background:linear-gradient(90deg,#333,#333),linear-gradient(0deg,#333,grey);background:linear-gradient(to right,var(--cassette-bg),var(--cassette-bg)),linear-gradient(0deg,var(--cassette-bg),grey);background-clip:padding-box,border-box;background-origin:padding-box,border-box;border:1px solid transparent;border-radius:50px;box-shadow:0 2px 2px rgba(0,0,0,.2);display:flex;height:80px;justify-content:center;margin-bottom:25px;position:relative;width:300px;z-index:1}.wheel{height:60px;position:relative;width:60px}.wheel-left.playing{-webkit-animation:rolling 3s linear infinite;animation:rolling 3s linear infinite}.wheel-right.playing{-webkit-animation:rolling 4s linear infinite;animation:rolling 4s linear infinite}@-webkit-keyframes rolling{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rolling{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.wheel-shadow{background:linear-gradient(180deg,#000,hsla(0,0%,100%,.3));border-radius:50%;height:64px;position:absolute;width:64px;z-index:-1}.wheel-shadow-left{left:7px;top:7px}.wheel-shadow-right{right:7px;top:7px}.teeth-wrapper{align-items:center;background:#ddd;background:var(--bg-color);border:5px solid #ccc;border:5px solid var(--teeth);display:flex;justify-content:center}.teeth-wrapper,.teeth-wrapper:before{border-radius:50%;height:100%;width:100%}.teeth-wrapper:before{background:radial-gradient(circle,hsla(0,0%,100%,.2) 55%,rgba(0,0,0,.5) 80%);content:"";left:0;position:absolute;top:0;z-index:10}.tooth{box-shadow:inset 8px 0 0 0 #ccc,inset -8px 0 0 0 #ccc;box-shadow:inset var(--teeth) 8px 0 0 0,inset var(--teeth) -8px 0 0 0;height:9px;position:absolute;width:90%}.tooth:nth-of-type(2){-webkit-transform:rotate(45deg);transform:rotate(45deg)}.tooth:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tooth:nth-of-type(4){-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.window{background:#ddd!important;background:var(--bg-color)!important;background:linear-gradient(90deg,#fff,#fff),linear-gradient(0deg,grey,#000);background-clip:padding-box,border-box;background-origin:padding-box,border-box;border:1.5px solid transparent;border-radius:8px;box-shadow:inset 1px 2px 1px rgba(0,0,0,.3);height:60px;margin:0 15px;overflow:hidden;position:relative;width:130px}.window:before{background:rgba(0,0,0,.3);content:"";height:8px;position:absolute;width:100%;z-index:1}.window .tape-left{box-shadow:1px 0 5px rgba(0,0,0,.5);height:120px;left:-75%;top:-58%;width:120px}.window .tape-left,.window .tape-right{background-image:repeating-radial-gradient(circle,#773838 0,#773838 2px,#714739 0,#714739 3px);background-image:repeating-radial-gradient(circle,var(--tape-color) 0,var(--tape-color) 2px,#714739 2px,#714739 3px);border-radius:50%;position:absolute}.window .tape-right{box-shadow:-1px 0 5px rgba(0,0,0,.5);height:160px;right:-85%;top:-95%;width:160px}.screw{align-items:center;background:linear-gradient(180deg,#000,hsla(0,0%,100%,.3));border-color:#c3c4c1 #c3c4c1 #5e5f5a #5e5f5a;border-style:solid;border-width:.4em .4em .35rem .42rem;box-shadow:1px -.2px 1px 0 #ddd;box-shadow:var(--bg-color) 1px -.2px 1px 0;display:flex;height:15px;justify-content:center;-webkit-transform:rotate(-50deg);transform:rotate(-50deg);width:15px}.screw,.screw:after{border-radius:50%;position:absolute}.screw:after{background:linear-gradient(-140deg,rgba(0,0,0,.1),hsla(0,0%,100%,.3));content:"";display:block;height:21px;left:-9px;top:-10px;width:21px;z-index:-1}.screw span,.screw span:after{background:#222;border-radius:.08em;display:block;height:.15em;width:.5em}.screw span:after{content:"";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.screw.screw-tl span{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}.screw.screw-tr span{-webkit-transform:rotate(10deg);transform:rotate(10deg)}.screw.screw-bl span{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}.screw.screw-br span{-webkit-transform:rotate(39deg);transform:rotate(39deg)}.screw-tl{left:8px;top:8px}.screw-tr{right:8px;top:8px}.screw-bl{bottom:8px;left:8px}.screw-br{bottom:8px;right:8px}.screw-bottom{margin-bottom:30px;position:relative;-webkit-transform:rotate(-50deg) scale(.8);transform:rotate(-50deg) scale(.8)}.bottom{align-items:flex-end;background:linear-gradient(-20deg,#000 30%,hsla(0,0%,100%,.6));display:flex;height:75px;justify-content:space-between;left:80px;padding:10px 40px;width:335px;z-index:10000}.bottom,.bottom:after{bottom:0;-webkit-clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);position:absolute}.bottom:after{background:linear-gradient(180deg,#333,#ddd 1000%,#333);background:linear-gradient(to bottom,var(--cassette-bg),var(--bg-color) 1000%,var(--cassette-bg));background-size:100% 3px;content:"";height:80px;left:2px;top:2px;width:332px;z-index:-1}.holes{align-items:flex-end;display:flex;z-index:0}.hole{background:#ddd;background:var(--bg-color);border-radius:50%;box-shadow:inset 1px 1px 1px rgba(0,0,0,.7);height:18px;width:18px}.hole:after{background:linear-gradient(180deg,#000,hsla(0,0%,100%,.3));border-radius:50%;content:"";height:22px;margin-left:-2px;margin-top:-2px;position:absolute;width:22px;z-index:-1}.hole-square{background:#ddd;background:var(--bg-color);border-radius:2px;box-shadow:inset 1px 1px 1px rgba(0,0,0,.7);height:14px;width:15px}.hole-square:after{background:linear-gradient(180deg,#000,hsla(0,0%,100%,.3));border-radius:4px;content:"";height:19px;margin-left:-2px;margin-top:-3px;position:absolute;width:19px;z-index:-1}.hole-square.left{margin:0 0 10px 30px}.hole-square.right{margin:0 30px 10px 0}.label{background-size:450px 450px;border:1px solid #333;border:1px solid var(--cassette-bg);border-radius:10px;font-size:.7em;height:186px;left:32px;letter-spacing:-.1rem;overflow:hidden;position:absolute;text-overflow:hidden;top:30px;white-space:nowrap;width:440px}.label.blue{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#72b4d7 0,#72b4d7 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#72b4d7 0,#72b4d7);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-blue) 26.67%,var(--cassette-blue) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-blue) 76.67%,var(--cassette-blue) 100%)}.label.green{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#80bf82 0,#80bf82 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#80bf82 0,#80bf82);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-green) 26.67%,var(--cassette-green) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-green) 76.67%,var(--cassette-green) 100%)}.label.orange{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#f5864f 0,#f5864f 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#f5864f 0,#f5864f);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-orange) 26.67%,var(--cassette-orange) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-orange) 76.67%,var(--cassette-orange) 100%)}.label.pink{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#b86089 0,#b86089 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#b86089 0,#b86089);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-pink) 26.67%,var(--cassette-pink) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-pink) 76.67%,var(--cassette-pink) 100%)}.label.purple{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#8172c4 0,#8172c4 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#8172c4 0,#8172c4);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-purple) 26.67%,var(--cassette-purple) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-purple) 76.67%,var(--cassette-purple) 100%)}.label.brown{background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 0,#f4f5df 26.67%,#af8656 0,#af8656 50%,#f4f5df 0,#f4f5df 71.33%,#f4f5df 0,#f4f5df 76.67%,#af8656 0,#af8656);background-image:linear-gradient(180deg,#f4f5df 21.33%,#f4f5df 21.33%,#f4f5df 26.67%,var(--cassette-brown) 26.67%,var(--cassette-brown) 50%,#f4f5df 50%,#f4f5df 71.33%,#f4f5df 71.33%,#f4f5df 76.67%,var(--cassette-brown) 76.67%,var(--cassette-brown) 100%)}.label:after{background:transparent;border-bottom:.1em solid #999;border-radius:.7em;border-top:.1em solid #555;content:"";height:190px;left:-3px;position:absolute;top:-3px;width:444px}.label-writing{align-items:center;background:#f4f5df;border-radius:10px;color:#2b2baa;color:var(--writing);display:flex;flex-direction:column;font-family:Reenie Beanie,cursive;font-size:2.2rem;height:50px;justify-content:space-between;margin:10px auto 0;padding:10px 20px 20px;width:420px}
/*# sourceMappingURL=main.d0b1a920.css.map*/