:root{--primary-light:#8abdff;--primary:#6d5dfc;--primary-dark:#5b0eeb;--white:#fff;--greyLight-1:#e4ebf5;--greyLight-2:#c8d0e7;--greyLight-3:#bec8e4;--greyDark:#9baacf}*,:after,:before{margin:0;padding:0;box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%;background:#e4ebf5;background:var(--greyLight-1)}body{-webkit-user-select:none;-ms-user-select:none;user-select:none;background-color:#8d8d8d}a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}.btn{width:5rem;height:5rem;font-size:2rem;border-radius:50%;border:none;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;box-shadow:.3rem .3rem .6rem var(--greyLight-2),-.2rem -.2rem .5rem var(--white);display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;cursor:pointer;background:#e4ebf5;background:var(--greyLight-1);color:#9baacf;color:var(--greyDark);transition:all .5s ease,font-size 0s linear}.btn-active:not(.power-off){color:#6d5dfc;color:var(--primary)}.btn-active{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:1.9rem}@media (hover:hover){.btn:not(.power-off):hover{color:#6d5dfc;color:var(--primary)}}#app{min-height:100vh;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-family:"Poppins",sans-serif;background:#e4ebf5;background:var(--greyLight-1);padding:2.5rem}#app,#drum-machine{-webkit-justify-content:center;justify-content:center}#drum-machine{width:100%;max-width:75rem;min-height:40rem;border-radius:3rem;box-shadow:.8rem .8rem 1.4rem #c8d0e7,-.2rem -.2rem 1.8rem #fff;box-shadow:.8rem .8rem 1.4rem var(--greyLight-2),-.2rem -.2rem 1.8rem var(--white);padding:4rem;display:grid;grid-template-columns:calc(50% - 2.5rem) calc(50% - 2.5rem);grid-template-rows:33.33% 33.33% 33.33%;grid-column-gap:5rem;-webkit-column-gap:5rem;column-gap:5rem}@media (max-width:850px){#drum-machine{padding:3rem 2rem;max-width:35rem;grid-template-columns:100%;grid-template-rows:auto auto auto auto;grid-row-gap:3rem;row-gap:3rem}}#drum-pad{grid-row:1/4;grid-column:1/2;max-width:30rem;min-height:30rem;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}@media (max-width:850px){#drum-pad{grid-row:2/3;grid-column:1/2}}.drum-pad-key{width:8rem;height:8rem;font-size:2rem;border-radius:35%;margin:1rem}.drum-pad-key-active:not(.power-off){color:#6d5dfc;color:var(--primary)}.drum-pad-key-active{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:1.9rem}@media (max-width:850px){.drum-pad-key{width:6rem;height:6rem;font-size:2rem;border-radius:30%}.drum-pad-key-active:not(.power-off){color:#6d5dfc;color:var(--primary)}.drum-pad-key-active{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:1.9rem}}.slider{grid-row:3/4;grid-column:2/3;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:100%;height:2rem;align-self:center;margin:auto;position:relative}@media (max-width:850px){.slider{grid-row:4/5;grid-column:1/2}}.slider-box{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);border-radius:1rem;-webkit-justify-content:center;justify-content:center}.slider-box,.slider-color-box{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.slider-color-box{z-index:100;border-radius:inherit;-webkit-justify-content:flex-start;justify-content:flex-start;overflow:hidden}.slider-color{height:100%;opacity:.6;background:#6d5dfc;background:var(--primary);background:linear-gradient(-1deg,#d4d4d4,#e4ebf5 50%,#fff)}.slider-color:not(.power-off){opacity:1;background:linear-gradient(-1deg,#5b0eeb,#6d5dfc 50%,#8abdff);background:linear-gradient(-1deg,var(--primary-dark),var(--primary) 50%,var(--primary-light))}.slider-btn-box{width:calc(100% - 3rem);height:100%;z-index:200}.slider-btn,.slider-btn-box{position:absolute;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.slider-btn{width:3rem;height:3rem;border-radius:50%;background:#fff;background:var(--white);box-shadow:0 .1rem .3rem 0 #bec8e4;box-shadow:0 .1rem .3rem 0 var(--greyLight-3);cursor:pointer}.slider-btn:after{content:"";width:1rem;height:1rem;border-radius:50%}.slider-btn:after,.slider-input{position:absolute;box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white)}.slider-input{-webkit-appearance:none;appearance:none;top:0;left:0;width:100%;height:100%;border-radius:1rem;opacity:0;z-index:999}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:3rem;height:3rem;border-radius:50%;background:#fff;cursor:pointer}.slider-input::-moz-range-thumb{appearance:none;width:3rem;height:3rem;border-radius:50%;background:#fff;cursor:pointer}.display{width:100%;margin:auto;height:7rem;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;box-shadow:.3rem .3rem .6rem var(--greyLight-2),-.2rem -.2rem .5rem var(--white);border-radius:1rem;grid-row:1/2;grid-column:2/3;align-self:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}@media (max-width:850px){.display{grid-row:1/2;grid-column:1/2}}.display-text{width:calc(100% - .8rem);height:6.2rem;border-radius:.8rem;box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:2rem;overflow:hidden}.display-text-row{background:rgba(180,199,219,.5411764705882353);width:100%;-webkit-justify-content:center;justify-content:center}.display-text-col1,.display-text-row{height:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;align-items:center}.display-text-col1{width:10.5rem;min-width:10.5rem;-webkit-justify-content:stretch;justify-content:stretch;padding:1rem}.display-text-col1 .display-kit,.display-text-col1 .display-volume{width:50%;height:100%;-webkit-flex-grow:1;flex-grow:1;font-size:1.2rem;display:-webkit-flex;display:flex;-webkit-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-justify-content:space-evenly;justify-content:space-evenly;-webkit-align-items:center;align-items:center}.display-text-col2{padding:.5rem;font-size:1.5rem;-webkit-flex-grow:1;flex-grow:1;text-align:center}.setting-pad{width:100%;grid-row:2/3;grid-column:2/3;align-self:center;justify-self:center;display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:space-around;justify-content:space-around}@media (max-width:850px){.setting-pad{grid-row:3/4;grid-column:1/2}}.radio{position:relative;width:6rem;height:6rem}@media (max-width:850px){.radio{width:5rem;height:5rem}}.radio-input{display:none}.radio-input:checked~label{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white)}.radio-input:checked~label:after{width:39%;height:39%}.radio-input:checked~label:not(.power-off):after{background:#6d5dfc;background:var(--primary)}.radio-label{box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;box-shadow:.3rem .3rem .6rem var(--greyLight-2),-.2rem -.2rem .5rem var(--white);position:absolute;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;cursor:pointer;width:100%;height:100%;border-radius:50%}.radio-label:not(.power-off):hover:after{background:#6d5dfc;background:var(--primary)}.radio-label:after{content:"";position:absolute;width:40%;height:40%;background:#9baacf;background:var(--greyDark);border-radius:50%;transition:all .3s ease,width 0s linear,height 0s linear}.power-btn{width:6rem;height:6rem;font-size:2.5rem;border-radius:50%}.power-btn-active:not(.power-off){color:#6d5dfc;color:var(--primary)}.power-btn-active,.power-btn:active{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:2.4rem}.power-btn:hover{color:inherit}@media (max-width:850px){.power-btn{width:5rem;height:5rem;font-size:2.5rem;border-radius:50%}.power-btn-active:not(.power-off){color:#6d5dfc;color:var(--primary)}.power-btn-active,.power-btn:active{box-shadow:inset .2rem .2rem .5rem #c8d0e7,inset -.2rem -.2rem .5rem #fff;box-shadow:inset .2rem .2rem .5rem var(--greyLight-2),inset -.2rem -.2rem .5rem var(--white);font-size:2.4rem}}#loader:after{content:"Loading";white-space:pre;-webkit-animation-name:LoaderAnim;animation-name:LoaderAnim;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal}@-webkit-keyframes LoaderAnim{0%{content:"Loading   "}30%{content:"Loading.  "}60%{content:"Loading.. "}90%{content:"Loading..."}to{content:"Loading..."}}@keyframes LoaderAnim{0%{content:"Loading   "}30%{content:"Loading.  "}60%{content:"Loading.. "}90%{content:"Loading..."}to{content:"Loading..."}}
/*# sourceMappingURL=main.c4487a81.chunk.css.map */