body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#56b6c2;background-color:var(--main-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:Gill Sans,sans-serif}:root{--main-color:#56b6c2}#selectors{background-color:var(--main-color);left:0;position:fixed;top:0;transform-style:preserve-3d;width:100vw;z-index:4}.settings{background-color:bisque;border:1px solid #000;padding:3px}.playback-button{background-color:#8ee4bd;border:1px solid #000;border-radius:4px;color:#000;cursor:pointer;display:inline;font-size:16px;margin:0 2px 1px 0;outline:4px;padding:5px 3px 7.5px;text-align:center;text-decoration:none;width:5%}.stop-button:active{color:orange}.recording-button.active{color:red}.playing-button.active{color:green}.metronome-button.active{color:#e97e7e}.save-export{display:inline-block}.popup{align-items:center;animation-duration:.5s;animation-fill-mode:forwards;animation-name:drop-in;background-color:var(--main-color);border:1px solid #000;border-radius:5px;display:flex;height:-webkit-max-content;height:max-content;outline:#000;position:fixed;width:-webkit-max-content;width:max-content}.lift-out{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:lift-out!important}.popup-button{margin:10px}.bpm-input{text-align:center;width:5ex}.settings-buttons{display:block}.settings-button{background-color:#e48ec9;border:solid;color:#000;cursor:pointer;display:inline;font-size:16px;outline:4px;padding:.5%;text-align:center;text-decoration:none}.left-settings-button{border-radius:30px 0 0 30px}.right-settings-button{border-radius:0 30px 30px 0}.login-elems{left:0;position:absolute}.click-drag{background-color:bisque;border:1px solid #000;padding:.5px 3px 3.5px}.settings.button{cursor:pointer;padding:4px 4px 3.5px}.settings.input{background-color:#fff;padding:4px 0 3.5px;text-align:center}#time.settings.input{border-radius:4px;cursor:default;font-size:14px;margin-top:1px;padding:8px 7.25px 7.25px;vertical-align:middle;width:2em}@media screen and (max-width:800px){.playback-button{font-size:12px}}@media screen and (max-width:650px){.playback-button{font-size:8px}}.midi-note{background:var(--main-color);display:inline-block;left:0;outline:1px solid #000;position:absolute;top:2px}#key-note-input{background-color:initial;color:#0000;left:0;position:absolute;top:0;transform:translateZ(-10px)}#key-note-input:focus{outline:none}#bpm-slider{height:20px;position:relative;z-index:0}.note-label{border:none;display:block;height:8.33%;outline:2px inset #000;padding:6px;text-align:start;width:100%}.note-label:hover{background-color:gray}.note-label.natural{background-color:#fff;color:#000}.note-label.accidental{background-color:#000;color:#fff}.note-label.active{background-color:#f62222;color:#fff}#midi{display:flex;grid-template:"labels" "midi"/100px 1000px;justify-content:center;position:relative;white-space:nowrap;width:100%}#track-position{border-right:3px solid #000;display:inline-block;grid-column:1;grid-row:1;height:100%;left:0;position:absolute;top:0;transform-style:preserve-3d;width:2px;z-index:1}#midi-note-labels{display:grid;grid-column:1;grid-row:1;left:0;margin-left:auto;margin-top:21px;position:-webkit-sticky;position:sticky;width:100%;z-index:3}#midi-track{background-color:#a1a1a1;display:grid;grid-area:1/2;grid-template-columns:100%;grid-template-rows:100%;margin-right:auto;position:relative}#subdivs{display:grid;grid-column:1;grid-row:1}.subdivision{border-left:.08em solid #727272}#note-tracks{display:grid;grid-column:1;grid-row:1;margin-top:21px}.note-track{outline:.08em solid #727272;position:relative}#time-slider{-webkit-appearance:none;appearance:none;background-color:var(--main-color);background:linear-gradient(#0000 40%,#000 0,#000 60%,#0000 0,#0000);grid-column:1;grid-row:1;width:100%;z-index:2}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#000;border-radius:2px;height:1rem;visibility:hidden;width:1rem}@keyframes lift-out{0%{position:fixed;top:0}to{position:absolute;top:-100%}}#popup-bg{animation-duration:.5s;animation-fill-mode:forwards;animation-name:drop-in;justify-content:center;z-index:5}#popup-bg,#reg-bg{background-color:rgba(7,52,77,.857);display:flex;height:100%;position:fixed;top:0;width:100%}#reg-bg{z-index:100}@keyframes drop-in{0%{position:absolute;top:-100%}to{position:fixed;top:0}}#loginreg-modal{align-items:center;animation-duration:.5s;animation-fill-mode:forwards;animation-name:drop-in;background-color:var(--main-color);border-radius:2%;display:flex;flex-direction:column;overflow:hidden;position:fixed;top:0;width:200px;z-index:100}#loginreg-modal>.close-button{background:none;border:none;cursor:pointer;margin-right:auto;outline:none}.loginreg-element.button{background-color:#a856c6;border-radius:5px;cursor:pointer}button#register-label{margin-top:30px}#login-form{display:grid;grid-template:"a" "a" "a" "a" "a" "a" "a";margin:10% 15% 15%}input#register{margin-top:1em}#register-form{display:grid;grid-template:"a" "a" "a" "a" "a" "a" "a";margin:5% 15% 15% 5%}.App{background-color:var(--main-color);display:flex;flex-direction:row;height:-webkit-max-content;height:max-content;justify-content:center;margin:auto;text-align:center}#welcome-user{background-color:#fff;border:1px solid #000;border-radius:5px;border-radius:inherit;cursor:default;padding:0 0 3.5px 2px}.login-elems{border-radius:4px;display:block;float:right;margin:0 2vw;position:relative}.button.loginout{border-radius:inherit;margin-top:1px}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#info-button{background:none;border:none;float:left;font-size:24px;margin:0}@keyframes drop-in-info{0%{position:absolute;top:-100%}to{position:fixed;top:25vh}}#popup-info{align-items:center;align-self:center;animation-duration:.5s;animation-fill-mode:forwards;animation-name:drop-in-info;background-color:var(--main-color);border-radius:20px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-self:center;padding:2em;width:75%;z-index:11}#popup-info,.info-text-container{display:flex;flex-direction:column}.info-text-container{justify-content:flex-start}.info-text{display:block;font-size:medium;margin:0;text-align:left}.keyboard{display:flex;flex-direction:column}.keyboard .top-row{display:inherit;justify-content:center}.keyboard .bottom-row{display:inherit}.info .keyboard .key{align-items:center;background:#fff;border-radius:10px;display:inline-flex;font-size:1em;height:5rem;justify-content:center;width:5rem}.info .keyboard .key.hidden{visibility:hidden}button.info{background:none;border:none;left:0;position:absolute;top:0}button.info.close{font-size:1.5em}.exit-button{background-color:initial;border:none;left:0;position:absolute;top:0}#small-screen-msg{display:none}@media screen and (max-width:950px){.info .keyboard .key{font-size:10px;height:3rem;width:3rem}}@media screen and (max-width:500px){#midi,#selectors{display:none}#small-screen-msg{display:block}#popup-bg,#popup-info{display:none}}
/*# sourceMappingURL=main.f6571c98.css.map*/