a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body,html,root{height:100%;width:100%}.btn.active,.btn:active,button:active,button:focus,button:hover,input:active,input:focus,input:hover,label:focus,textarea:active,textarea:focus,textarea:hover{outline:0!important;-webkit-appearance:none;box-shadow:none!important}button{border-style:inherit;background-color:inherit;text-decoration:none;padding:0;margin:0}button:focus{outline:0}select:focus{outline:0;cursor:pointer}#root,body,html{height:100%}#root{width:100%;position:relative}body{min-height:100%;font-family:"Avenir","Monserrat";font-size:2em}.column,.row{display:flex}.column{flex-direction:column}.c_reverse{display:flex;flex-direction:column-reverse}.align{align-items:center}.a_start{align-items:flex-start}.a_end{align-items:flex-end}.j_center{display:flex;justify-content:center}.j_space{display:flex;justify-content:space-around}.j_between{display:flex;justify-content:space-between}.j_end{display:flex;justify-content:flex-end}.j_start{display:flex;justify-content:flex-start}.relative{position:relative}.absolute{position:absolute}.width{width:100%}.halfWidth{width:50%}.height{height:100%}.halfHeight{height:50%}.threeQuarterHeight{height:75%}.textAlign{text-align:center}.overflow{overflow:overlay}@-moz-document url-prefix(){.overflow{overflow:auto}}.hover{cursor:pointer}@font-face{font-family:Monserrat;src:url(/static/media/Montserrat-Regular.ee653992.ttf)}.App{position:relative;width:100%;height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#mouseFollower{position:absolute;background-color:red;height:20px;width:20px;border-radius:50%}@-webkit-keyframes onScrollerAppear{0%{opacity:0}to{opacity:1}}@keyframes onScrollerAppear{0%{opacity:0}to{opacity:1}}.appeared{-webkit-animation-name:onScrollerAppear;animation-name:onScrollerAppear;-webkit-animation-duration:1.5s;animation-duration:1.5s}@-webkit-keyframes WhiteDisappeared{0%{opacity:1;background-color:#fff}to{opacity:0}}@keyframes WhiteDisappeared{0%{opacity:1;background-color:#fff}to{opacity:0}}.whiteDisappeared{-webkit-animation-name:WhiteDisappeared;animation-name:WhiteDisappeared;-webkit-animation-duration:1.5s;animation-duration:1.5s}@-webkit-keyframes greenDisappeared{0%{opacity:1;color:#679b9b}to{opacity:0}}@keyframes greenDisappeared{0%{opacity:1;color:#679b9b}to{opacity:0}}.greenDisappeared{-webkit-animation-name:greenDisappeared;animation-name:greenDisappeared;-webkit-animation-duration:1.5s;animation-duration:1.5s}#scroller{position:fixed;bottom:50px;right:50px;height:50px;width:50px;display:flex;justify-content:center;align-items:center;border-radius:50%;z-index:99}#homeScreen{background-color:#aacfcf;color:#fff;font-size:80px}#homeScreen,#screen2{height:100vh;width:100%}#screen2{background-color:#fde2e2;font-size:24px;position:relative;display:flex;flex-direction:column;justify-content:space-around;color:#aacfcf}#screen2 div{line-height:45px}#screen2 a{border:2px solid #fff;margin-right:auto;margin-left:auto;padding:10px 30px;border-radius:25px;font-size:20px;cursor:pointer;color:#aacfcf;background-color:#fff;text-decoration:inherit;font-family:"Avenir","Monserrat"}#underConstruct{position:absolute;bottom:0;left:50%;transform:translate(-50%);height:20%;width:100%;background-color:#fff0f0}.para1{margin-left:100px}.para2{display:flex;flex-direction:column;text-align:end;position:relative;right:100px}#particlesFrame{position:absolute;height:100%;width:100%}#screen3{height:100vh;width:100%;background-color:#aacfcf;font-size:24px;position:relative;color:#fff0f0}#screen3 h2{font-size:40px;font-weight:lighter;position:absolute;top:100px;left:50%;transform:translate(-50%,-50%);-webkit-text-shadow:3px 5px #ffb6b6;-moz-text-shadow:3px 3px #ffb6b6;text-shadow:5px 5px #ffb6b6}h3{margin-bottom:5px}.bold,h3{font-weight:500}header{position:-webkit-sticky;position:sticky;top:100px;margin-top:100px;margin-bottom:100px;-webkit-text-shadow:3px 5px #ffb6b6;-moz-text-shadow:3px 3px #ffb6b6;text-shadow:5px 5px #ffb6b6}#switchContainer{height:20px;width:35px;border-radius:25px;position:relative}#switch{left:2px;-webkit-animation-name:rightToLeft;animation-name:rightToLeft}#switch,#switchBis{height:16px;width:16px;border-radius:50%;background-color:#fff;cursor:pointer;position:absolute}#switchBis{right:2px;-webkit-animation-name:leftToRight;animation-name:leftToRight}@-webkit-keyframes leftToRight{0%{left:3.5px}to{right:3.5px}}@keyframes leftToRight{0%{left:3.5px}to{right:3.5px}}@-webkit-keyframes rightToLeft{0%{right:3.5px}to{left:3.5px}}@keyframes rightToLeft{0%{right:3.5px}to{left:3.5px}}.transparent{color:transparent}.pink{color:#ffb6b6}.backPink{background-color:#ffb6b6}.borderPink{border-color:#ffb6b6}.lightPink{color:#fde2e2}.backLightPink{background-color:#fde2e2}.borderLightPink{border-color:#fde2e2}.lightGreen{color:#aacfcf}.backLightGreen{background-color:#aacfcf}.borderLightGreen{border-color:#aacfcf}.green{color:#679b9b}.backGreen{background-color:#679b9b}.borderGreen{border-color:#679b9b}.grey{color:#d3d3d3}.life1{background-color:#ffb6b6}.life2,.life3{background-color:#fde2e2}.life4{background-color:#679b9b}.backGrey{background-color:#b4b4b4}.backBlue{background-color:#5d96ff}.backSalmon{background-color:#ffa07a}.backWhite{background-color:#fff}.white{color:#fff}.blue{color:#1a54c1}.darkGrey{color:#4d4f5c}.lightGrey{color:#b4b4b4}.icon{cursor:pointer;font-size:20px}.bigIcon{cursor:pointer;font-size:24px}#selectedItem{height:50px;width:50px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#679b9b;z-index:-1}.i{background-size:20px 30px}#board{border-radius:5px;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%)}#boardContainer{position:relative;color:#679b9b;background-color:#aacfcf;height:100vh}#paramHeader{height:100px;width:100%;display:flex;justify-content:space-between;align-items:center;color:#fff0f0;-webkit-text-shadow:3px 5px #aacfcf;-moz-text-shadow:3px 3px #aacfcf;text-shadow:5px 5px #aacfcf;position:absolute}#paramHeader div{font-size:18px}#paramHeader h2{font-size:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;color:#fff;border-radius:30px;background-color:#aacfcf;-webkit-text-shadow:3px 5px #ffb6b6;-moz-text-shadow:3px 3px #ffb6b6;text-shadow:5px 5px #ffb6b6}.playIcon{font-size:26px;color:#fff0f0}.playStopContainer{position:absolute;width:150px;justify-content:space-between;margin-left:100px}.menuBar{position:absolute;width:200px;right:100px}.square{height:16px;width:16px;margin:2.5px;border-radius:50%}.square:active{transform:translateY(1px)}.solid{border:1px solid;height:14px;width:14px}.cellShadow{box-shadow:1px 1px 2px 0 rgba(50,50,50,.1);height:14px;width:14px}.circle{height:24px;width:24px;border-radius:50%;box-shadow:1px 1px 0 px rgba(50,50,50,.74);background-color:#fff;z-index:99}.centerCircle{height:24px;width:24px;border-radius:50%}#cellDirections{width:90px;height:90px;display:flex;flex-wrap:wrap;position:absolute;top:-38px;left:-38px;z-index:98;align-content:space-between}#gridDimensionner{position:absolute;bottom:0;left:0;width:200px}@-webkit-keyframes onAppearBis{0%{left:-100%}50%{left:20px}to{left:0}}@keyframes onAppearBis{0%{left:-100%}50%{left:20px}to{left:0}}#optionsBar{width:150px;padding:10px 15px;border-radius:5px 0 0 5px;position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:space-around;font-size:16px;-webkit-animation-name:onAppearBis;animation-name:onAppearBis;-webkit-animation-duration:1s;animation-duration:1s}.optionButton{font-size:16px;padding:5px;width:90%;margin-bottom:5px}.optionButton:active{transform:translateY(1px)}.optionButton h3{margin-right:10px}.optionButton select{padding:5px;text-align:center;border-radius:5px;border-style:inherit}#midiConnect{border:2px solid #fff;padding:10px 0;border-radius:25px;font-size:12px;cursor:pointer;color:#aacfcf;background-color:#fff;text-decoration:inherit;font-family:"Avenir","Monserrat";margin-top:20px;margin-right:20px}.midiOptions{display:flex;flex-direction:column;align-items:flex-start;font-size:16px;padding:5px}.midiOptions select{max-width:150px}@-webkit-keyframes onActiveBis{0%{width:0;height:0%}50%{width:180%;height:180%}to{width:0;height:0%}}@keyframes onActiveBis{0%{width:0;height:0%}50%{width:180%;height:180%}to{width:0;height:0%}}.activeStep{position:absolute;background-color:plum;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;-webkit-animation-name:onActive;animation-name:onActive;-webkit-animation-duration:1s;animation-duration:1s}@-webkit-keyframes x1y0{0%{transform:translateX(-18px)}to{transform:translateX(0)}}@keyframes x1y0{0%{transform:translateX(-18px)}to{transform:translateX(0)}}.x1y0{-webkit-animation-name:x1y0;animation-name:x1y0}@-webkit-keyframes x1y1{0%{transform:translate(-18px,-18px)}to{transform:translate(0)}}@keyframes x1y1{0%{transform:translate(-18px,-18px)}to{transform:translate(0)}}.x1y1{-webkit-animation-name:x1y1;animation-name:x1y1}@-webkit-keyframes x1y-1{0%{transform:translate(-18px,18px)}to{transform:translate(0)}}@keyframes x1y-1{0%{transform:translate(-18px,18px)}to{transform:translate(0)}}.x1y-1{-webkit-animation-name:x1y-1;animation-name:x1y-1}@-webkit-keyframes x0y1{0%{transform:translateY(-18px)}to{transform:translateY(0)}}@keyframes x0y1{0%{transform:translateY(-18px)}to{transform:translateY(0)}}.x0y1{-webkit-animation-name:x0y1;animation-name:x0y1}@-webkit-keyframes x0y-1{0%{transform:translateY(18px)}to{transform:translateY(0)}}@keyframes x0y-1{0%{transform:translateY(18px)}to{transform:translateY(0)}}.x0y-1{-webkit-animation-name:x0y-1;animation-name:x0y-1}@-webkit-keyframes x-1y0{0%{transform:translateX(18px)}to{transform:translateX(0)}}@keyframes x-1y0{0%{transform:translateX(18px)}to{transform:translateX(0)}}.x-1y0{-webkit-animation-name:x-1y0;animation-name:x-1y0}@-webkit-keyframes x-1y1{0%{transform:translate(18px,-18px)}to{transform:translate(0)}}@keyframes x-1y1{0%{transform:translate(18px,-18px)}to{transform:translate(0)}}.x-1y1{-webkit-animation-name:x-1y1;animation-name:x-1y1}@-webkit-keyframes x-1y-1{0%{transform:translate(18px,18px)}to{transform:translate(0)}}@keyframes x-1y-1{0%{transform:translate(18px,18px)}to{transform:translate(0)}}.x-1y-1{-webkit-animation-name:x-1y-1;animation-name:x-1y-1}@-webkit-keyframes onAppearTer{0%{bottom:-100%}50%{bottom:20px}to{bottom:0}}@keyframes onAppearTer{0%{bottom:-100%}50%{bottom:20px}to{bottom:0}}#siderContainer{width:60%;padding:10px 15px;border-radius:0 5px 5px 0;position:absolute;left:50%;bottom:0;transform:translate(-50%);font-size:16px;-webkit-animation-name:onAppearTer;animation-name:onAppearTer;-webkit-animation-duration:1s;animation-duration:1s;display:flex;justify-content:space-between}.parameter{font-size:16px;padding:5px;margin-bottom:5px}#siderContainer .parameter{display:flex;align-items:center}#siderContainer .parameter h3{margin-right:10px;margin-bottom:0}#siderContainer .parameter input{width:40px}.parameter input,.parameter select{padding:5px;text-align:center;border-radius:5px;border-style:inherit}.numberInput{font-size:20px}.numberIcon{margin:10px;height:18px;width:10px;color:#679b9b}@-webkit-keyframes onAppear{0%{right:-100%}50%{right:20px}to{right:0}}@keyframes onAppear{0%{right:-100%}50%{right:20px}to{right:0}}#SynthBar{height:450px;width:150px;padding:10px 15px;border-radius:5px 0 0 5px;position:absolute;top:50%;right:0;transform:translateY(-50%);justify-content:space-between;font-size:16px;-webkit-animation-name:onAppear;animation-name:onAppear;-webkit-animation-duration:1s;animation-duration:1s}#SynthBar,#SynthBar .parameter{display:flex;flex-direction:column;align-items:flex-end}#SynthBar .parameter input{width:40px}.faderContainer{height:200px;width:8px;border:1px solid #b4b4b4;border-radius:5px;background-color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16);position:relative}.fader{width:14px;height:14px;border-radius:50%;background:#fff 0 0 no-repeat padding-box;box-shadow:1px 2px 8px rgba(0,0,0,.19);border:2px solid #5d96ff;position:absolute;left:50%;transform:translate(-50%,-50%);cursor:pointer}.fadersBlock{width:100px}#fmParamsBloc{text-align:end;display:flex;flex-direction:column;align-items:center}#generalParamsBloc{display:flex;flex-wrap:wrap;height:100px;justify-content:flex-end;width:120px;margin-top:20px}.switchContainer{width:45%}#tutoSpace{position:absolute;top:calc(50% - 50px);left:50%;transform:translate(-50%,-50%);text-align:center;width:78%}#tutoSpace div{margin-bottom:15px}#tutoIcons{width:600px}@-webkit-keyframes selectedFading{0%{color:#aacfcf}60%{color:#aacfcf}to{color:#fff0f0}}@keyframes selectedFading{0%{color:#aacfcf}60%{color:#aacfcf}to{color:#fff0f0}}.selectedFading{-webkit-animation-name:selectedFading;animation-name:selectedFading;-webkit-animation-duration:1s;animation-duration:1s}@-webkit-keyframes right1{0%{left:-150px}80%{left:20px}to{left:0}}@keyframes right1{0%{left:-150px}80%{left:20px}to{left:0}}.right1{-webkit-animation-name:right1;animation-name:right1;-webkit-animation-duration:.8s;animation-duration:.8s}@-webkit-keyframes right2{0%{left:-300px}80%{left:20px}to{left:0}}@keyframes right2{0%{left:-300px}80%{left:20px}to{left:0}}.right2{-webkit-animation-name:right2;animation-name:right2;-webkit-animation-duration:.8s;animation-duration:.8s}@-webkit-keyframes right3{0%{left:-450px}80%{left:20px}to{left:0}}@keyframes right3{0%{left:-450px}80%{left:20px}to{left:0}}.right3{-webkit-animation-name:right3;animation-name:right3;-webkit-animation-duration:.8s;animation-duration:.8s}@-webkit-keyframes left1{0%{left:150px}80%{left:0}to{left:0}}@keyframes left1{0%{left:150px}80%{left:0}to{left:0}}.left1{-webkit-animation-name:left1;animation-name:left1;-webkit-animation-duration:.8s;animation-duration:.8s}@-webkit-keyframes left2{0%{left:300px}80%{left:0}to{left:0}}@keyframes left2{0%{left:300px}80%{left:0}to{left:0}}.left2{-webkit-animation-name:left2;animation-name:left2;-webkit-animation-duration:.8s;animation-duration:.8s}@-webkit-keyframes left3{0%{left:450px}80%{left:0}to{left:0}}@keyframes left3{0%{left:450px}80%{left:0}to{left:0}}.left3{-webkit-animation-name:left3;animation-name:left3;-webkit-animation-duration:.8s;animation-duration:.8s}
/*# sourceMappingURL=main.2ded7318.chunk.css.map */