body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100%;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#splash{-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);background:hsla(0,0%,69%,.34);color:#fff;height:100%;position:absolute;transition:opacity .9s;width:100%;z-index:2000}#piano,#splash{display:flex;flex-direction:column}#piano{align-items:center;margin-top:40px}@media screen and (max-width:1600px){#keyHeader{width:100%}#pianoHolder{align-items:center;display:flex;flex-direction:column;width:100%}}#playHelp{font-size:25px;font-weight:400;margin-left:50px;max-width:500px}#pianoImage{max-width:1800px}#splashBottom{align-items:center;display:flex;font-size:30px;font-weight:700;margin-right:55px}#splashBottom .material{font-size:40px;margin-right:20px}#splashText{color:#fff;font-size:50px;font-weight:700;margin-top:390px;position:absolute}#splashLogo{width:400px}#keyHeader{display:flex;justify-content:space-between}#logoHolder{align-items:center;display:flex;flex-direction:column;justify-content:center}.removed{opacity:0}#metronome{align-items:center;color:#fff;display:flex;justify-content:center}#metroIcon{width:25px}#bpmInput{margin-left:20px}input[type=text]{background:none;border:none;color:#fff;font-family:inherit;font-size:20px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#beats{font-size:20px;margin-left:3px;margin-right:20px}#play{background:rgba(87,129,192,.77);border-radius:5px;box-shadow:0 0 14px #5781c0;height:31px;justify-content:center;left:298px;top:247px;width:31px}#play,#volumeWrap{align-items:center;display:flex}#volumeIcon{font-size:30px;margin-right:10px}.slider{-webkit-appearance:none;background:#6d7689;border-radius:5px;border-radius:16px;box-shadow:0 4px 4px rgba(0,0,0,.25),inset 0 0 3px 1px rgba(0,0,0,.53);height:20px;opacity:.7;outline:none;transition:opacity .2s;width:150px;z-index:100}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:25px;width:25px}.slider::-moz-range-thumb{background:#fff;border-radius:50%;cursor:pointer;height:25px;width:25px}#keyboard{align-items:center;align-self:center;flex:1 1;flex-direction:row;gap:5px; /* !Should not be this */max-height:300px}#keyboard,.black_key,.section{display:flex;justify-content:center}.black_key{align-items:flex-end;background:#6d7689;border-radius:0 0 10px 10px;box-shadow:inset 4px 0 7px rgba(0,0,0,.25);color:#f3f3f3;height:150px;margin-bottom:60px;margin-right:-37px;position:absolute;width:23px;z-index:1000}.black_key span{font-size:12px;margin-bottom:10px}.black_key:hover{background:linear-gradient(180deg,#6c7689 21.35%,#313847 75.52%)}.blackPressed{-webkit-animation-name:blackPress;animation-name:blackPress}.blackPressed,.keyPressed{-webkit-animation-duration:.4s;animation-duration:.4s}.keyPressed{-webkit-animation-name:keyPress;animation-name:keyPress}.key{align-items:center;
  /* !margin-right: 5px; Should be this instead */background-color:#f0f0f0;border-radius:5px;display:flex;-webkit-filter:drop-shadow(0 3px 20px hsla(0,0%,100%,.459));filter:drop-shadow(0 3px 20px rgba(255,255,255,.459));flex-direction:column;font-size:14px;font-style:normal;font-weight:600;height:240px;justify-content:flex-end;width:32px}

/*! Performance issues for linear-gradient on mac */.key:hover{background:linear-gradient(180deg,#cfcfcf 57.29%,hsla(0,0%,81%,0));color:#fff}.key span{font-size:17px;margin-bottom:10px}@-webkit-keyframes keyPress{0%{background:linear-gradient(180deg,#cfcfcf 57.29%,hsla(0,0%,81%,0));color:#fff}to{background:linear-gradient(180deg,#f0f0f0 57.29%,hsla(0,0%,93%,.972))}}@keyframes keyPress{0%{background:linear-gradient(180deg,#cfcfcf 57.29%,hsla(0,0%,81%,0));color:#fff}to{background:linear-gradient(180deg,#f0f0f0 57.29%,hsla(0,0%,93%,.972))}}@-webkit-keyframes blackPress{0%{background:linear-gradient(180deg,#6c7689 21.35%,#313847 75.52%)}to{background:linear-gradient(180deg,#6d7689 57.29%,#313847)}}@keyframes blackPress{0%{background:linear-gradient(180deg,#6c7689 21.35%,#313847 75.52%)}to{background:linear-gradient(180deg,#6d7689 57.29%,#313847)}}#root{font-family:Montserrat;height:100%}.App{background:#0e2031;display:flex;flex-direction:column;height:inherit;overflow:hidden;position:relative}#controls{flex-direction:row;justify-content:space-between;width:100%}#container,#controls{align-items:center;display:flex}#container{color:#e7e7e7;font-size:20px;font-style:normal;font-weight:600}

/*! Remove to make logo text further apart */#container span{left:140px;position:absolute}#top{display:flex;justify-content:space-between}#middle{align-items:center;align-self:center;display:flex;flex:1 1;flex-direction:column;justify-content:center}#logo{height:auto;margin:20px;width:110px}#triangle{-webkit-animation:rotation 50s linear infinite;animation:rotation 50s linear infinite;position:absolute;right:-157px;top:-130px}@-webkit-keyframes rotateCircle{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes rotateCircle{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg);-webkit-transform-origin:50% 29%;transform-origin:50% 29%}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg);-webkit-transform-origin:50% 29%;transform-origin:50% 29%}}@-webkit-keyframes polyRotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes polyRotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}#tricircle{-webkit-animation:rotateCircle 50s linear infinite;animation:rotateCircle 50s linear infinite;bottom:-184px;right:-152px}#polygon,#tricircle{overflow:hidden;position:absolute}#polygon{-webkit-animation:polyRotate 620s linear infinite;animation:polyRotate 620s linear infinite;bottom:-234px;left:-114px}#bottom{align-items:flex-start;display:flex;justify-content:center;min-height:340px}#note{align-self:flex-start;width:300px}.effects{width:400px}#noteWrap{margin-top:55px;position:relative}#current{color:#e6e6e6;font-size:50px;left:50%;margin-left:19px;position:absolute;text-shadow:0 0 10px #fff;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.noselect{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
/*# sourceMappingURL=main.07b55dcd.css.map*/