body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#323437;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}.fret{border-right:1px solid #3f3f3f;flex:1 1;height:40px;margin-right:1px;position:relative;transition:background-color .3s ease}.fret:last-child{margin-right:0}.fret-note{color:#fff;display:none;font-size:18px;font-weight:700;z-index:2}.fret-note,.fret-note:before{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.fret-note:before{background-color:orange;border-radius:50%;content:"";height:32px;width:32px;z-index:-1}.open-note .fret-note{color:#fff}div.fret.open-note{background-color:#666;border-right:10px solid #fff;width:30px}.fretted-note .fret-note{color:#000}.fret.open-note .fret-note,.fret.show-notes .fret-note{color:#fff;display:block}.fret.open-note .fret-note:before,.fret.show-notes .fret-note:before{background-color:orange;height:32px;width:32px}.fret.open-note:hover .fret-note:before,.fret.show-notes:hover .fret-note:before{background-color:#279c0a}.fret.root-note .fret-note{color:#fff}.fret.root-note .fret-note:before{background-color:red}.fret.playing-note .fret-note:before,.fret:hover .fret-note:before{background-color:#279c0a}@media only screen and (max-device-width:866px) and (orientation:landscape){.fret.open-note .fret-note:before,.fret.show-notes .fret-note:before{background-color:orange;height:22px;width:22px}.fret-note{font-size:10px}.fret-note:before{height:20px;width:20px}div.fret.open-note{border-right:5px solid #fff}}.fret-number{background-color:grey;margin:0 5px;padding:5px}.fret-number.hidden{display:none}.fret-number.open{background-color:initial;color:#fff;font-weight:700}.fret-numbers{box-sizing:border-box;display:flex;justify-content:space-between;padding:5px 23px;width:100%;z-index:3}.fret-number{background:#939393;border-radius:3px;color:#fff;font-size:.8rem;padding:2px 4px;position:relative;text-align:center;width:30px;z-index:3}@media only screen and (max-device-width:866px) and (orientation:landscape){.fret-numbers{box-sizing:border-box;display:flex;justify-content:space-between;padding:5px 0;width:100%;z-index:3}.fret-number.open{font-size:10px}.fret-number{background:#939393;border-radius:3px;color:#fff;font-size:.8rem;padding:0;position:relative;text-align:center;width:20px;z-index:3}}.metronome-overlay{background:#000000b5;display:flex;height:100%;left:0;top:0;width:100%}.metronome-overlay,.metronome-popup{align-items:center;justify-content:center;position:fixed;z-index:1000}.metronome-popup{background:#fff;border-radius:8px;box-shadow:0 2px 10px #ffffff73;left:50%;padding:20px;top:50%;transform:translate(-50%,-50%);width:300px}.metronome-popup h2{color:#000;margin-top:0}.metronome-popup label{align-items:center;display:flex}.metronome-popup input[type=number]{-webkit-appearance:none;appearance:none;font-size:30px;height:30px;margin-left:10px;padding-right:30px;position:relative;top:-20px;width:120px}.metronome-popup input[type=number]::-webkit-inner-spin-button,.metronome-popup input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metronome-popup input[type=number]:after{color:#000;content:"\25B2";cursor:pointer;font-size:12px;position:absolute;right:10px;top:5px}.metronome-popup input[type=number]:before{bottom:5px;color:#000;content:"\25BC";cursor:pointer;font-size:12px;position:absolute;right:10px}.metronome-popup input[type=number]:focus::-webkit-inner-spin-button,.metronome-popup input[type=number]:focus::-webkit-outer-spin-button{-webkit-appearance:none}button{border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:10px;padding:10px;width:100%}div.metronome-body{margin-top:20px}.playcontrols{flex-direction:column;margin-top:60px}.playcontrols,.upper-controls{align-items:center;display:flex}.upper-controls{margin-bottom:10px}.metronome-display,.playnote-display,.playnow-display,.scale-display,.settings-display{align-items:center;background-color:#f0f0f0;border-radius:5px;display:flex;flex-wrap:wrap;height:60px;margin-right:10px;padding:5px}.metronome-display div,.scale-info,.settings-display div{font-size:14px;font-weight:700;margin-right:10px}.metronome-display div,.settings-display div{margin-right:5px}.position,.scale-positions{display:flex}.position{align-items:center;background-color:#d3d3d3;border-radius:3px;font-size:14px;height:20px;justify-content:center;margin:0 2px;transition:background-color .3s;width:20px}.position.show-all{padding:0 10px;width:auto}.position.active,.position:hover{background-color:green;color:#fff}.lower-controls{align-items:center;display:flex;justify-content:center}.lower-controls button{background-color:#ccc;border:none;color:#333;cursor:pointer;line-height:26px;margin:5px;padding:10px;transition:background-color .3s}.lower-controls button.active{background-color:#279c0a;color:#fff}.lower-controls button:hover{background-color:#279c0a}.lower-controls button img{padding:0 10px}.metronome-display,.settings-display{flex-direction:column}.metronome-display div,.settings-display div{margin-right:0}.key-info.highlight{background-color:#ff0}.playnote-display,.playnow-display{flex-direction:column}.playnote-display h4{font-size:16px;font-weight:700;margin-bottom:8px}.note-buttons{display:flex;gap:4px;justify-content:flex-start;margin-bottom:10px}.note-buttons .position{align-items:center;background-color:#d3d3d3;border-radius:3px;display:flex;font-size:14px;height:20px;justify-content:center;margin:0 2px;transition:background-color .3s;width:20px}.note-buttons .position.active{background-color:#4caf50;color:#fff}.currently-playing{font-size:14px;font-weight:400;margin-top:10px}.playnow-display h4{font-size:16px;font-weight:700;margin-bottom:8px}.playnow-notes{display:flex;flex-wrap:wrap;font-size:14px;gap:4px}.playnow-notes,.playnow-notes .note{font-weight:400}.playnow-notes .note.recent-note{color:#000;font-weight:700}@media only screen and (max-device-width:866px) and(orientation:landscape){.playcontrols{align-items:center;display:flex;flex-direction:column;margin-top:-60px}.scale-display,.settings-display{align-items:center;background-color:#f0f0f0;border-radius:5px;display:flex;justify-content:center;margin:0;padding:5px;position:absolute;top:0;z-index:150}.popup-container{position:relative;z-index:300!important}.settings-display{left:300px;top:-76px;z-index:28500}.settings-popup-overlay{z-index:200}.scale-display{left:580px;top:-76px;z-index:28500}.logo-container{align-items:center;display:flex;justify-content:center;position:relative;z-index:900}}.fretboard{background:#2e2e2e;border-radius:5px;box-shadow:0 0 10px #00000080;padding:15px 0;position:relative}.fretboard,.fretboard-container,.fretboard-wrapper{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;width:100%}.string{display:flex;justify-content:space-between;position:relative;width:100%;z-index:2}.string:before{border-top-color:#fff;border-top-style:solid;content:"";left:1.5%;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}.string:nth-child(6):before{border-top-width:1px}.string:nth-child(5):before{border-top-width:1.5px}.string:nth-child(4):before{border-top-width:2px}.string:nth-child(3):before{border-top-width:2.5px}.string:nth-child(2):before{border-top-width:3px}.string:first-child:before{border-top-width:3.5px}.reverse-strings .string:nth-child(6):before{border-top-width:3.5px!important}.reverse-strings .string:nth-child(5):before{border-top-width:3px}.reverse-strings .string:nth-child(4):before{border-top-width:2.5px}.reverse-strings .string:nth-child(3):before{border-top-width:2px}.reverse-strings .string:nth-child(2):before{border-top-width:1.5px}.reverse-strings .string:first-child:before{border-top-width:1px}.playcontrols button{display:flex;flex-wrap:wrap;float:left;margin-top:20px;text-align:left;width:150px}.fret-marker{position:absolute;top:50%;transform:translate(200%,-50%);z-index:0}.fret-marker .dot{margin:2px 0}.fret-marker .dot,.fret-marker.double .dot{background-color:#fff;border-radius:50%;height:20px;width:20px}.fret-marker.double .dot{margin:100px 0}.fret-marker.double .dot:nth-child(2){top:calc(50% + 20px)}.fret.highlighted{background-color:blue;color:#fff}.fret.stop{background-color:red;color:#fff}.open-note:before{background-color:orange!important;opacity:1!important}@media only screen and (max-device-width:866px) and (orientation:landscape){.fretboard-container{flex-direction:row}.fretboard{flex:1 1;margin-right:10px;width:100%}.fret-marker{position:absolute;top:50%;transform:translate(80%,-50%);z-index:0}.fret-marker .dot,.fret-marker.double .dot{height:18px;width:18px}.fret-marker.double .dot:nth-child(2){top:calc(50% + 20px)}}@font-face{font-family:Saira Condensed Medium;font-style:normal;font-weight:400;src:url(/static/media/Saira_Condensed-Medium.d26bf48b894a6f400396.ttf) format("truetype")}@font-face{font-family:Saira Condensed Light;font-style:normal;font-weight:400;src:url(/static/media/Saira_Condensed-Light.0f53c2ee78f0cc7a93b8.ttf) format("truetype")}.App{box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:20px;text-align:center;width:100%}.logo-container{align-items:center;display:flex;justify-content:center}.text-container{align-items:flex-start;display:flex;flex-direction:column;padding-top:10px}img.logo{margin-top:-24px;max-width:120px;padding:10px;vertical-align:middle}h1{font-family:Saira Condensed Medium,sans-serif;font-size:60px;font-weight:400;line-height:30px;margin:0}h1,h2{color:#fff}h2{font-family:Saira Condensed Light,sans-serif;font-size:38px;font-weight:600;line-height:46px;margin-top:2px}.controls,h2{text-align:left}.controls{display:flex;flex-direction:column;float:left;width:100%}.controls label{margin:10px 0}.playcontrols-container{box-sizing:border-box;display:flex;justify-content:space-between;padding:10px;width:100%}button{background-color:#000}@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)}}.rotate-screen{align-items:center;background-color:#2e2e2e;color:#fff;display:none;flex-direction:column;height:100%;justify-content:center;left:0;position:fixed;text-align:center;top:0;width:100%;z-index:9999}.rotate-logo{max-width:280px}.rotate-screen h1{font-size:56px}.rotate-screen h2{font-size:32px;line-height:38px}.rotate-screen p{font-size:28px}.rotate-icon{height:120px;margin:20px auto;width:120px}.rotate-animation{animation:rotate-pause 2s ease-in-out infinite}@keyframes rotate-pause{0%{transform:rotate(0deg)}45%{transform:rotate(90deg)}55%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.rotate-screen p{animation:blink 1.5s infinite;color:#ccc;font-size:13px;margin-top:10px}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.copy{color:#fff;font-size:12px;padding-top:20px}.install-button{background-color:#009650;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;margin-top:20px;padding:10px 20px}.install-button:hover{background-color:#02cf36}@media only screen and (orientation:portrait){.app-content,.controls-container{display:none}.rotate-screen{display:flex}.try{background-color:#ddff48;color:#000;padding:10px}.copy{top:0!important}}@media only screen and (max-device-width:866px) and (orientation:landscape){.App{padding:10px}div.lower-controls,div.scale-info.metronome-display,div.scale-info.playnote-display,div.scale-info.playnow-display{display:none}h1{font-size:28px}h2{font-size:20px;line-height:20px}img.logo{max-width:80px;position:relative;top:10px}.rotate-screen{display:none}.logo-container{justify-content:flex-start}.playcontrols{margin-left:200px!important;margin-top:-375px!important}.playcontrols-container{align-items:flex-start;display:flex;flex-direction:column;left:0;position:absolute;top:0}}#root,body,html{height:100%;margin:0;overflow:hidden;padding:0;width:100%}.app-content{display:flex}.app-content,.landscape-message{align-items:center;height:100%;justify-content:center;width:100%}.landscape-message{background-color:#000;color:#fff;display:none;display:flex;font-size:24px;text-align:center}.controls{z-index:10000}.copy{position:relative;top:290px}.ios-install-instructions{align-items:center;background:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.instructions-content{background:#fff;border-radius:10px;max-width:300px;padding:20px;text-align:center;width:90%}.share-icon{margin-left:5px;vertical-align:middle;width:24px}.arrow-icon{animation:bounce 1.5s infinite;margin-top:10px;width:30px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.close-button{background:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:15px;padding:10px 20px}.close-button:hover{background:#0056b3}.loading-bar-container{background-color:initial;height:4px;left:0;position:fixed;top:0;width:100%;z-index:1000}.loading-bar{animation:loading 3s linear infinite;background-color:#007bff;height:100%;width:100%}@keyframes loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}
/*# sourceMappingURL=main.c7d3c5f8.css.map*/