.scaleQuestion{grid-column:col-start/span 12;display:grid;grid-template-columns:repeat(12,[col-start] 1fr);grid-gap:1em}.scaleQuestion__scaleName{margin:0;font-size:1.5em}.scaleQuestion__alternativeModeName{margin:0;font-size:1em}.scaleQuestion__answer,.scaleQuestion__question{grid-column:2/span 11}.scaleQuestion__answer p,.scaleQuestion__question p{margin-bottom:.5em;margin-top:0}.scaleQuestion__answer{margin-bottom:5em}.scaleQuestion__notes{display:grid;grid-template-columns:repeat(auto-fill,1.7em);grid-gap:0;justify-items:center;grid-row-gap:.5em;font-size:45pt}.scaleQuestion__actions{display:grid;grid-template-columns:repeat(4,[col-start] 1fr);grid-gap:0;grid-template-rows:repeat(1,1fr);position:fixed;bottom:1em;left:0;width:100%}.scaleQuestion__hint,.scaleQuestion__solution{grid-column:col-start/span 12;margin-bottom:5em;padding:1em}.scaleQuestion__hint h1,.scaleQuestion__solution h1{font-size:12pt;font-weight:700;margin:0}.scaleQuestion__hint p:last-child,.scaleQuestion__solution p:last-child{margin-bottom:0}.scaleQuestion__hint{background-color:#dfa84c;color:#fff}.scaleQuestion__solution--correct{background-color:#77e785;color:#000}.scaleQuestion__solution--wrong{background-color:#df4c52;color:#fff}@media (min-width:1200px){.scaleQuestion__answer,.scaleQuestion__question{grid-column:2/span 10}.scaleQuestion__answer{margin-bottom:0}.scaleQuestion__notes{display:grid;grid-template-columns:repeat(auto-fill,1.7em);grid-gap:1em}.scaleQuestion__actions{display:block;position:relative;text-align:center;margin:1em 0}.scaleQuestion__hint,.scaleQuestion__question,.scaleQuestion__solution{grid-column:2/span 10}.scaleQuestion__playButton{display:inline-block}}.scaleQuestion__fretboard>div{color:#000;padding:1em 0 .5em;box-shadow:0 .5em 1em #000}.note{display:grid;grid-template-areas:"pitch accidentals";width:1.7em;font-size:45pt}.note--error{outline:2px solid red;outline-offset:10px}.note--highlighted{z-index:2}.note--highlighted:before{position:absolute;display:block;content:"";width:2em;height:1.6em;margin:-.2em;background-color:rgba(76,131,223,.3);border:2px solid #4c83df;border-radius:20px}.note__pitch{grid-area:pitch;width:1em;border-top-left-radius:20px;border-bottom-left-radius:20px}.note__pitch input{font-size:45pt;width:calc(1em - 2px);border:1px solid #969696;border-radius:20px 0 0 20px;text-align:center}.note__pitch input:focus{border-color:#2666d2;outline:0}.note__accidentals{display:grid;grid-template-columns:1fr;grid-area:accidentals;width:.7em;justify-items:left;margin-top:-1.5px;margin-bottom:-1.5px;align-content:space-evenly}@media (min-width:1200px){.note__accidentals{margin:0;align-content:space-between}}.note__accidental{border:1px solid #969696;background-color:#969696;color:#fff;width:80%;height:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;text-align:center;font-size:10pt;line-height:16pt;font-weight:700;cursor:pointer;transition:all .3s}.note__accidental:active,.note__accidental:focus,.note__accidental:hover{outline:0}.note__accidental:hover{background-color:#4c83df;border-color:#4c83df;cursor:pointer}.note__accidental:active{transition-duration:0s;background-color:#1e51a7;border-color:#1e51a7}.note__accidental--disabled,.note__accidental:disabled{color:#e2e2e2}.note__accidental--disabled,.note__accidental--disabled:hover,.note__accidental:disabled,.note__accidental:disabled:hover{background-color:#afafaf;border-color:#afafaf;cursor:default}.note__accidental--disabled .note__accidental--disabled--selected,.note__accidental--disabled .note__accidental--disabled--selected:hover,.note__accidental--disabled.note__accidental:disabled,.note__accidental:disabled .note__accidental--disabled--selected,.note__accidental:disabled .note__accidental--disabled--selected:hover,.note__accidental:disabled.note__accidental:disabled{background-color:#636363;border-color:#636363;cursor:default}.note__accidental--selected{background-color:#2666d2;border-color:#2666d2}.note__accidental--disabled.note__accidental--selected{border-color:#636363;background-color:#636363}.menu{display:block;position:fixed;visibility:visible;background-color:#fff;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);transition:box-shadow .5s,-webkit-transform .5s;transition:transform .5s,box-shadow .5s;transition:transform .5s,box-shadow .5s,-webkit-transform .5s}.menu--open{-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 2em #000}.menu__closeMenuButton{background-color:#fff;background-image:url(/scale-trainer/static/media/close.4ceeeab0.svg);width:44px;height:44px;cursor:pointer;border:0}.menu__accidentals,.menu__modes,.menu__scales{grid-column:col-start/span 12}.menu__accidentals summary,.menu__modes summary,.menu__scales summary{padding:1em;margin:0;border-bottom:1px solid #969696}.menu__accidentals summary:active,.menu__accidentals summary:focus,.menu__modes summary:active,.menu__modes summary:focus,.menu__scales summary:active,.menu__scales summary:focus{outline:0}.menu__accidentals:first-child summary:not([open]),.menu__modes:first-child summary:not([open]),.menu__scales:first-child summary:not([open]){border-top:1px solid #969696}.menu__accidentals[open] summary,.menu__modes[open] summary,.menu__scales[open] summary{border:0}.menu__menuItemGroup{display:flex;flex-direction:column;margin:0;padding:1em;border-bottom:1px solid #969696}.menu__menuItem{margin-bottom:1em}@media (min-width:768px){.menu{right:auto;width:300px}}@media (min-width:1200px){.menu__options{grid-column:col-start/span 12}.menu__accidentals{grid-column:span 3}.menu__scales{grid-column:span 6;display:grid;grid-template-columns:repeat(5,[col-start] 1fr);grid-gap:1em;grid-template-rows:repeat(2,1fr);grid-auto-flow:column}.menu__modes{grid-column:span 3}}.menuBar{grid-column:col-start/span 12;border-bottom:1px solid #969696}.menuBar__openMenuButton{background-color:#fff;background-image:url(/scale-trainer/static/media/burger.61c9ecbb.svg);width:44px;height:44px;cursor:pointer;border:0}.scaleTrainer{display:grid;grid-template-columns:repeat(12,[col-start] 1fr);grid-gap:1em}.breakpoint{display:none;position:fixed;bottom:0;width:100%;text-align:center}.breakpoint--desktop{background-color:green;color:#fff}.breakpoint--tablet{background-color:#ff0}.breakpoint--mobile{background-color:red;color:#fff}button{font:12pt -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:#2666d2;border:0;padding:1em 0;margin:0;color:#fff;font-weight:700;max-width:150px;transition:all .3s}@media (min-width:360px){button{margin-left:auto;margin-right:auto;width:100%}}@media (min-width:1200px){button{margin:1em}}button:active,button:focus,button:hover{outline:0}button:hover{background-color:#4c83df;border-color:#4c83df;cursor:pointer}button:active{transition-duration:0s;background-color:#1e51a7;border-color:#1e51a7}button--disabled,button:disabled{color:#e2e2e2}button--disabled,button--disabled:hover,button:disabled,button:disabled:hover{background-color:#afafaf;border-color:#afafaf;cursor:default}button--disabled button--disabled--selected,button--disabled button--disabled--selected:hover,button--disabledbutton:disabled,button:disabled button--disabled--selected,button:disabled button--disabled--selected:hover,button:disabledbutton:disabled{background-color:#636363;border-color:#636363;cursor:default}button--selected{background-color:#2666d2;border-color:#2666d2}button--disabledbutton--selected{border-color:#636363;background-color:#636363}body,input{padding:0}body{font:12pt -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-width:250px;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/*# sourceMappingURL=main.d4f9495e.chunk.css.map */