@font-face{font-family:Digital;src:local("Digital"),url(../../static/media/digital-dream.regular.ee9072cf.ttf) format("truetype")}@font-face{font-family:Billie Bold;src:local("Billie Bold"),url(../../static/media/billieboldhand.regular.a69e29a2.ttf) format("truetype")}body,html{max-height:100vh;overflow:hidden}body{margin:0;padding:0;font-family:Helvetica,Arial,sans-serif;cursor:default}.subtitle{max-width:120px;text-align:center;margin:10px auto;padding:10px;border:1px solid #ff0;border-radius:20px;background:#000;font-family:Digital;text-transform:uppercase;color:#ff0}.subtitle:hover{cursor:default}@media (min-width:1440px) and (min-height:900px){.subtitle{max-width:180px;font-size:1.8em}}@media (max-height:615px),(max-width:970px){.subtitle{max-width:90px;font-size:1em}}@media (max-height:580px),(max-width:770px){.subtitle{max-width:70px;font-size:.8em}}@media (max-height:480px),(max-width:470px){.subtitle{max-width:60px;font-size:.6em}}@media (max-width:330px){.subtitle{max-width:50px;padding:5px;font-size:.4em;border-radius:8px}}.headerContainer{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.credits{margin-top:20px;width:12px;-ms-flex-positive:0;flex-grow:0;-ms-flex-item-align:center;align-self:center;font-size:12px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);white-space:nowrap}.creditsClick{margin-top:160px;font-family:monospace;-webkit-animation:rainbowConnection 10s infinite;animation:rainbowConnection 10s infinite;-webkit-animation-delay:5s;animation-delay:5s}@-webkit-keyframes rainbowConnection{0%{color:#000}20%{color:#008b8b}40%{color:#daa520}60%{color:crimson}80%{color:#00008b}to{color:#000}}@keyframes rainbowConnection{0%{color:#000}20%{color:#008b8b}40%{color:#daa520}60%{color:crimson}80%{color:#00008b}to{color:#000}}.credits:hover{cursor:pointer}.headerBox{-ms-flex-positive:10;flex-grow:10;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;height:100%}.logo{height:96px;width:96px}.title{font-family:Billie Bold,Arial,sans-serif;font-size:4em;letter-spacing:4px;margin:6px;padding:6px;background:-webkit-gradient(linear,left top,right top,color-stop(10%,#eded10),color-stop(purple),color-stop(50%),color-stop(60%,red),color-stop(80%,orange),to(#eded10));background:-webkit-linear-gradient(left,#eded10 10%,purple,50%,red 60%,orange 80%,#eded10);background:-o-linear-gradient(left,#eded10 10%,purple,50%,red 60%,orange 80%,#eded10 100%);background:linear-gradient(90deg,#eded10 10%,purple,50%,red 60%,orange 80%,#eded10);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #222}@media (min-width:1440px) and (min-height:900px){.title{font-size:5em;padding-top:12px}.logo{height:120px;width:120px}}@media (max-height:800px),(max-width:970px){.title{font-size:3em;letter-spacing:2px}.logo{height:84px;width:84px}}@media (max-height:630px),(max-width:770px){.title{font-size:2.4em;letter-spacing:1px}.logo{height:60px;width:60px}.credits{display:hidden;width:0;height:0}}@media (max-height:430px),(max-width:330px){.title{font-size:1.2em;background:transparent;-webkit-text-fill-color:#f60c1f;-moz-text-fill-color:#f60c1f;color:#f60c1f}}@media (max-height:500px),(max-width:470px){.title{font-size:1.8em}.logo{height:45px;width:45px}}@media (max-width:770px) and (max-height:630px){.title{font-size:1.8em}.logo{height:50px;width:50px}}@media (max-width:770px) and (max-height:530px){.title{font-size:1.4em}.logo{height:50px;width:50px}}.trackBox{margin:15px 20px}.waiting{border:1px outset #F2F20DFF!important;left:1px;-webkit-animation:blink .5s linear infinite;animation:blink .5s linear infinite}@-webkit-keyframes blink{50%{border:1px outset #F2F20D00}}@keyframes blink{50%{border:1px outset #F2F20D00}}.playing,.selected{-webkit-filter:brightness(1.2);filter:brightness(1.2);border:1px outset #f2f20d!important}.row0{background:-webkit-gradient(linear,right top,left bottom,from(#d88),color-stop(#c00),to(#800));background:-webkit-linear-gradient(top right,#d88,#c00,#800);background:-o-linear-gradient(top right,#d88,#c00,#800);background:linear-gradient(to bottom left,#d88,#c00,#800)}.row1{background:-webkit-gradient(linear,right top,left bottom,from(#c7c),color-stop(#732673),to(#531653));background:-webkit-linear-gradient(top right,#c7c,#732673,#531653);background:-o-linear-gradient(top right,#c7c,#732673,#531653);background:linear-gradient(to bottom left,#c7c,#732673,#531653)}.row2{background:-webkit-gradient(linear,right top,left bottom,from(#8484e2),color-stop(#3434b2),to(#141462));background:-webkit-linear-gradient(top right,#8484e2,#3434b2,#141462);background:-o-linear-gradient(top right,#8484e2,#3434b2,#141462);background:linear-gradient(to bottom left,#8484e2,#3434b2,#141462)}.row3{background:-webkit-gradient(linear,right top,left bottom,from(#8c8),color-stop(green),to(#040));background:-webkit-linear-gradient(top right,#8c8,green,#040);background:-o-linear-gradient(top right,#8c8,green,#040);background:linear-gradient(to bottom left,#8c8,green,#040)}.trackButton:hover{cursor:pointer}.trackButton:active{-webkit-filter:brightness(1.1);filter:brightness(1.1);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s;left:1px;top:1px}.trackButton{border:1px outset transparent;min-width:120px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:1.1em;letter-spacing:1px;font-weight:400;padding:8px;border-radius:5px;color:#f2f20d;-webkit-box-shadow:2px 2px #444;box-shadow:2px 2px #444;outline:none;position:relative;left:0;top:0}@media (min-width:1440px) and (min-height:900px){.trackButton{font-size:1.5em;padding:10px 12px;min-width:180px;margin:10px}}@media (max-height:615px),(max-width:970px){.trackButton{font-size:.8em;min-width:80px}}@media (max-height:615px),(max-width:770px){.trackBox{margin:12px}}@media (max-width:580px){.trackButton{font-size:.6em;min-width:60px;letter-spacing:0}}@media (max-width:330px){.trackBox{margin:6px 0;padding:0}.trackButton{font-size:.4em;min-width:40px;letter-spacing:0;padding:5px;margin:0}}.slideInput{height:3px;background:#444;-webkit-box-shadow:-1px 1px 1px #888;box-shadow:-1px 1px 1px #888;-webkit-appearance:none}.verticalSlider{width:120px;margin-top:60px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-moz-transform:rotate(270deg)}.slideInput:hover{opacity:1;cursor:pointer}.slideInput:focus{outline:none}.slideInput:active::-webkit-slider-thumb{background:#fdfdfd}.slideInput:active::-moz-range-thumb{background:#fdfdfd}.slideInput::-webkit-slider-thumb{-webkit-appearance:none;border:.5px solid #000;height:30px;width:15px;border-radius:5px;background:#ddd}.slideInput::-moz-range-thumb{-webkit-appearance:none;border:.5px solid #000;height:30px;width:15px;border-radius:5px;background:#ddd}.verticalSlider::-webkit-slider-thumb{-webkit-box-shadow:-1px 1px 1px #222;box-shadow:-1px 1px 1px #222}.verticalSlider::-moz-range-thumb{box-shadow:-1px 1px 1px #222}@media (min-width:1440px) and (min-height:900px){.verticalSlider{margin-top:80px;width:150px}.slideInput::-webkit-slider-thumb{height:36px;width:17px}.slideInput::-moz-range-thumb{height:36px;width:17px}}@media (max-height:580px),(max-width:970px){.verticalSlider{width:100px;margin-top:50px}.slideInput::-webkit-slider-thumb{height:25px;width:12px}.slideInput::-moz-range-thumb{height:25px;width:12px}}@media (max-height:540px),(max-width:770px){.verticalSlider{width:80px;margin-top:40px;margin-bottom:40px}.slideInput::-webkit-slider-thumb{height:20px;width:10px}.slideInput::-moz-range-thumb{height:20px;width:10px}}@media (min-width:660px) and (max-height:480px){.verticalSlider{margin-left:-30px;margin-right:-30px}}@media (max-width:659px) and (max-height:480px){.verticalSlider{margin-top:auto;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-moz-transform:rotate(0)}}@media (max-width:330px){.verticalSlider{width:60px}}.instrumentContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}.instrumentBox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.onOff{display:inline-block;padding:4px;-ms-flex-align:center;align-items:center;text-align:center!important;height:50px;width:50px;border:1px solid #411;border-radius:25px;text-transform:uppercase;font-size:20px;background:darkred;margin:0 0 10px;-webkit-box-shadow:1px 1px .5px #222;box-shadow:1px 1px .5px #222;outline:none;position:relative;left:0;top:0}.onOff:hover{cursor:pointer}.onOff:active{left:1px;top:1px;-webkit-filter:brightness(1.1);filter:brightness(1.1);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s}.on{color:#ff0}.off{color:red}.goodBeatsOn{opacity:.7}@media (min-width:1440px) and (min-height:900px){.onOff{font-size:1.2em;height:60px;width:60px;border-radius:30px}}@media (max-height:615px),(max-width:970px){.onOff{font-size:.8em;height:40px;width:40px}}@media (max-height:500px),(max-width:500px){.onOff{font-size:.4em;height:32px;width:32px}}@media (max-width:350px){.onOff{font-size:.4em;height:28px;width:28px}}@media (min-width:660px) and (max-height:480px){.instrumentBox{-ms-flex-direction:row;flex-direction:row}.instrumentBottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}}.punchBox{margin:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.punchesBottom,.punchesTop{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}.punchButton{width:36px;height:36px;border:.5px solid #333;border-radius:30px;padding:8px;margin:8px;-webkit-box-shadow:1px 1px .5px #444;box-shadow:1px 1px .5px #444;position:relative;left:0;top:0}.punchButton:hover{cursor:pointer}.punchButton:active{left:1px;top:1px;-webkit-filter:brightness(1.1);filter:brightness(1.1);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s}.punch1{background:#1f681f}.punch2{background:#eded10}.punch3{background:#c01d38}.punch4{background:#1d1de6}@media (min-width:1440px) and (min-height:900px){.punchButton{width:50px;height:50px}}@media (max-width:970px) and (max-height:580px){.punchButton{width:30px;height:30px}}@media (max-width:520px) and (min-height:440px){.punchBox{margin:4px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.punchTitle{width:0;height:0;display:none}}@media (max-height:500px){.punchButton{width:24px;height:24px}}@media (max-width:770px){.punchButton{width:24px;height:24px}}@media (max-width:470px){.punchButton{width:20px;height:20px}}@media (max-width:390px){.punchBox{-ms-flex-wrap:wrap;flex-wrap:wrap}.punchButton{width:14px;height:14px;margin:2px}}.scratchBox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:center;justify-content:center}.scratchButton{width:110px;margin:4px;background:brown;border:1px solid #222;border-radius:20px;-webkit-box-shadow:2px 2px 1px #444;box-shadow:2px 2px 1px #444;padding:0;position:relative;left:0;top:0}.scratchButton:hover{cursor:pointer}.scratchButton:active{left:1px;top:1px;-webkit-filter:brightness(1.05);filter:brightness(1.05);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s}@media (min-width:1440px) and (min-height:900px){.scratchButton{width:135px}}@media (max-height:620px),(max-width:970px){.scratchButton{width:90px}}@media (max-width:770px){.scratchButton{width:75px}}@media (max-height:480px),(max-width:580px){.scratchButton{width:55px;border-radius:15px}}@media (max-width:300px){.scratchButton{width:40px;border-radius:10px}}@media (max-width:520px){.scratchBox{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media (max-height:410px){.scratchBox{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.goodBeatContainer{margin-bottom:0;padding-bottom:0;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}.goodBeatContainer,.goodBeatControls{height:100%;display:-ms-flexbox;display:flex}.goodBeatControls{margin-left:20px;-ms-flex-positive:8;flex-grow:8;position:relative;right:0;-webkit-transition:right 1s;-o-transition:right 1s;transition:right 1s;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.beatsHide{right:120vw}.goodBeatBox{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}.goodBeatTitleContainer{margin:0 24px 16px;-ms-flex-positive:1;flex-grow:1}.goodBeatTitle{margin:0;line-height:1.5em;position:relative;left:0;top:0}.goodBeatTitle:hover{cursor:pointer}.goodBeatTitle:active{-webkit-filter:brightness(1.8);filter:brightness(1.8);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s;left:1px;top:1px}.goodBeatButton{outline:none;font-size:1.1em;font-weight:500;color:#fffacd;background:#000;border-radius:4px;-webkit-box-shadow:2px 2px 1px #555;box-shadow:2px 2px 1px #555;border:0;position:relative;left:0;right:0;padding:2px 10px 3px;margin:2px}.goodBeatButton:hover{cursor:pointer}.goodBeatButton:active{-webkit-filter:brightness(1.4);filter:brightness(1.4);-webkit-transition:-webkit-filter .1s;transition:-webkit-filter .1s;-o-transition:filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s;left:1px;top:1px}@media (min-width:1440px) and (min-height:900px){.goodBeatButton{font-size:1.5em;padding:8px 12px}}@media (max-height:580px),(max-width:1024px){.goodBeatButton{font-size:.9em}}@media (max-width:970px){.goodBeatBox{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (max-width:550px),(min-width:500px){.goodBeatTitleContainer{margin:4px}.goodBeatButton{font-size:.7em;font-weight:100}}.goodBeatSliderBox{margin:4px 0 8px;padding:4px 0 8px}.goodBeatVolumeLabel{position:relative;top:4px;margin:20px;font-size:1.2em}.horizontalSlider{width:200px;margin:0}.horizontalSlider::-webkit-slider-thumb{-webkit-box-shadow:1px 2px 1px #222;box-shadow:1px 2px 1px #222}.horizontalSlider::-moz-range-thumb{box-shadow:1px 2px 1px #222}@media (min-width:1440px) and (min-height:900px){.goodBeatVolumeLabel{font-size:1.5em;top:6px}.horizontalSlider{width:240px}}@media (max-width:970px){.horizontalSlider{font-size:.9em}}@media (max-height:580px),(max-width:770px){.goodBeatVolumeLabel{margin:12px;font-size:1em}.horizontalSlider{width:120px}}@media (max-width:500px){.goodBeatVolumeLabel{margin:12px;font-size:.8em}}.sequencer{margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.seqRow{width:100vw}.seqMain{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}.seqLeft{border:5px inset hsla(0,0%,59%,.1);border-radius:25px;width:80%}.seqRight{border:5px inset transparent;padding-bottom:80px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.seqTop{height:13vh}.seqMain{height:74vh}.seqBottom{height:13vh}@media (min-width:1440px) and (min-height:900px){.seqLeft{border:0}.seqMain{height:72vh}.seqBottom{height:15vh}}@media (max-height:580px){.seqMain{height:76vh}.seqTop{height:10vh}.seqBottom{height:14vh}.seqLeft,.seqRight{border:0}}@media (max-width:970px){.seqTop{height:11vh}.seqMain{height:72vh}.seqBottom{height:17vh}}@media (max-width:770px){.seqTop{height:8vh}.seqMain{height:74vh}.seqBottom{height:18vh}.seqLeft{border:0}.seqRight{border:0;padding-bottom:0}}@media (max-width:659px) and (max-height:480px){.seqTop{height:8vh}.seqMain{height:76vh}.seqBottom{height:16vh}}@media (max-width:520px) and (min-height:440px){.seqMain{-ms-flex-direction:column;flex-direction:column}.seqTop{height:8vh}.seqMain{height:76vh}.seqBottom{height:16vh}.seqLeft{margin-top:5px}.seqLeft,.seqRight{width:100%;border:0}.seqRight{padding-bottom:0;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-direction:row;flex-direction:row}}@media (max-width:660px) and (max-height:390px){.seqTop{height:10vh}.seqMain{height:90vh}.seqBottom{display:none;height:0;width:0}}.app{max-height:100vh;overflow:hidden;text-align:center;background:-webkit-gradient(linear,left top,right bottom,from(#6f7285),to(#3d59ab));background:-webkit-linear-gradient(top left,#6f7285,#3d59ab);background:-o-linear-gradient(top left,#6f7285,#3d59ab);background:linear-gradient(to bottom right,#6f7285,#3d59ab)}@media (max-height:615px){.app{overflow:auto}}
/*# sourceMappingURL=main.319a691e.css.map*/