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;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body,html{background:radial-gradient(circle,#082032 0,#061724 82%);height:100%;width:100%}#root,.App{--first-fret-color:#222831;--fret-color:#2c394b;--fret-division-color:#fff;--guitar-color:#ff4c29;--string-color:#ddd;flex-direction:column;height:100%;overflow:hidden;width:100%}#root,.App,.starter{align-items:center;display:flex;justify-content:center}.starter{background:rgba(0,0,0,.8);bottom:0;color:#fff;font-size:3em;left:0;letter-spacing:.1em;position:fixed;right:0;top:0;z-index:5}.starter.hide{display:none}.controls{box-sizing:border-box;flex-direction:column;justify-content:center;margin-top:120px;max-width:1000px;padding:0 120px;position:relative;width:100%}.controls,.controls .stats{align-items:center;display:flex}.controls .stats{align-self:stretch;justify-content:space-between}.controls .modes{color:var(--guitar-color);display:flex;font-weight:700}.modes .mode{border-radius:8px;cursor:pointer;font-size:1.2em;letter-spacing:.1em;margin-left:16px;padding:8px 16px;text-shadow:1px 1px 2px rgba(0,0,0,.4);transition:all .3s linear}.modes .mode:hover{background-color:var(--fret-division-color);opacity:.7}.modes .mode.selected,.modes .mode:hover{color:var(--fret-color);text-shadow:1px 1px 0 transparent}.modes .mode.selected{background-color:var(--guitar-color)}.currentNoteStats{display:flex;flex-direction:column}.currentNoteStats .note{color:var(--guitar-color);font-size:6em;font-weight:700}.currentNoteStats .hz{color:var(--fret-division-color);font-size:2em;font-weight:700}.currentNoteStats .err{color:var(--guitar-color)}.fretboard{box-shadow:0 16px 32px rgba(0,0,0,.5);height:180px;width:100vw}.fretWrapper,.fretboard{display:flex;position:relative}.fretWrapper{background-color:var(--fret-color);border:1px solid var(--fret-division-color);border-left:0;border-right:0;box-shadow:inset 0 0 4px #000;flex:1 1;flex-direction:column;z-index:1}.fretWrapper:first-child{background:var(--first-fret-color);border-color:transparent;flex:1 1}.fretWrapper{flex:2.2 1}.fretWrapper:nth-child(n+6){flex:1.9 1}.fretWrapper:nth-child(n+9){flex:1.7 1}.fretWrapper:nth-child(n+11){flex:1.5 1}.fretWrapper:nth-child(n+14){flex:1.3 1}.fretWrapper:nth-child(n+18){flex:1 1}.dotsWrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-around;left:0;position:absolute;top:0;width:100%}.dot{background-color:#edf5fc;border-radius:100%;height:20px;opacity:.6;width:20px}.fret{flex:1 1;position:relative;z-index:1}.fret:after{background:var(--fret-division-color);box-shadow:4px 0 4px rgba(0,0,0,.2);content:"";height:100%;position:absolute;right:0;top:0;width:6px}.fretWrapper:first-child .fret:after{width:12px}.string{--size:2.5px;background-color:var(--string-color);background-image:linear-gradient(1turn,var(--string-color) 0,rgba(0,0,0,.2) 74%);box-shadow:0 4px 2px rgba(0,0,0,.3);height:var(--size);position:absolute;top:calc(50% - var(--size)/2);width:100%;z-index:1}.string.vibrate{-webkit-animation:vibrate .3s infinite;animation:vibrate .3s infinite}.fret:first-child .string{--size:5px}.fret:nth-child(2) .string{--size:4.7px}.fret:nth-child(3) .string{--size:4.2px}.fret:nth-child(4) .string{--size:4px}.fret:nth-child(5) .string{--size:3px}.noteOnString{--size:24px;align-items:center;background:#23ce6b;border:1px solid #000;border-radius:100%;display:flex;font-size:14px;font-weight:700;height:var(--size);justify-content:center;left:calc(50% - var(--size)/2);position:absolute;top:calc(50% - var(--size)/2);transition:all .3s ease;width:var(--size);z-index:2}.noteOnString.currentNote{--size:28px;background:#edf5fc;box-shadow:0 0 40px hsla(0,0%,100%,.8);opacity:.8;transition:all .2s ease}.noteOnString.currentNote.wrong{background:#ce2326;opacity:.5;transition:all 1s ease}.noteOnString.currentNote.hide{opacity:0;transition:all 1s ease}.notes{align-self:center;margin:16px 0}.noteControl,.notes{align-items:center;display:flex}.noteControl{background:rgba(0,0,0,.2);border:4px solid transparent;border-radius:100%;box-shadow:1px 1px 8px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-weight:700;height:40px;justify-content:center;margin:8px;opacity:.2;transition:all .3s linear;transition:all .5s ease;width:40px}.noteControl.selected,.noteControl:hover{border:4px solid rgba(0,0,0,.5);box-shadow:0 0 12px transparent;opacity:1}.a{background:#ce4023;color:#000}.asharp{background:#ce7923;color:#000}.b{background:#c8ce23}.b,.c{color:#000}.c{background:#70ce23}.csharp{background:#23ce81;color:#000}.d{background:#23a6ce;color:#000}.dsharp{background:#2340ce;color:#fff}.e{background:#4523ce}.e,.f{color:#fff}.f{background:#8f23ce}.fsharp{background:#cb23ce;color:#fff}.g{background:#ce23c5;color:#fff}.gsharp{background:#ce2326;color:#fff}.unimportantnote{background:#000;color:#fff}.wood{background:var(--guitar-color);border-radius:25%;box-shadow:0 8px 16px #000;height:400%;position:absolute;right:-600px;top:-150%;width:800px}.wood div{aspect-ratio:1;background:rgba(0,0,0,.1);border-radius:100%;height:50%}@-webkit-keyframes vibrate{0%{top:0}25%{top:2px}75%{top:-2px}}@keyframes vibrate{0%{top:0}25%{top:2px}75%{top:-2px}}.madeby{bottom:16px;color:#edf5fc87;font-size:1.2em;left:16px;letter-spacing:.1em;position:fixed;z-index:6}.madeby b{color:var(--guitar-color)}.madeby u{color:var(--fret-division-color)}.desktopOnly{display:none}@media only screen and (max-width:600px){.desktopOnly{align-items:center;background-color:var(--first-fret-color);bottom:0;color:var(--fret-division-color);display:flex;flex-direction:column;justify-content:center;left:0;padding:16px;position:fixed;right:0;top:0;z-index:6}.desktopOnly h1{font-size:6em;margin:0}.desktopOnly h2{font-size:1.5em;font-weight:400}.desktopOnly i{color:var(--guitar-color)}}
/*# sourceMappingURL=main.398152bb.css.map*/