body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}:root{--blackKey:#2a2a2b;--whiteKey:#f1f1f1;--selectedKey:#077af5;--selectedBlock:#1d1d1d;--answerKey:#12c00c;--wrongKey:#b34949;--action:#0082ff;--actionHover:#077af5;--block:#f7f7f7;--shadow:#181818;--white:#fff;--unselected:rgba(0,0,0,0.3);--unselectedHover:rgba(0,0,0,0.4);--selected:var(--action);--selectedHover:var(--actionHover);--font:lighter 17px sans-serif;--font-family:"Montserrat",sans-serif;--opacity:.5;--radius:3px;--background:#fff}.body{margin:auto;position:relative;padding:10px;box-sizing:border-box;max-width:100%;overflow-x:hidden;color:#000;font:var(--font);font-family:var(--font-family)}.App-header,.body{background-color:var(--background)}.App-header{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.keyboardContainer{width:90%;max-width:100%;margin:auto;position:relative;overflow-x:auto;overflow-y:hidden}.pianoKeys{background-color:var(--background);position:inherit;height:122px;padding:20px 20px 2px}#results{max-width:100%;overflow-x:auto}.blackKeys,.whiteKeys{position:absolute;left:0;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex}.whiteKeys p{text-align:center;font-size:15px;position:relative;color:#000;top:65px}.blackKeys{left:31px}.blackKey,.blackKeySpace,.whiteKey{border:1px solid #313131;position:relative;display:inline-block;width:58px;border-radius:5px;margin:1px}.blackKey:active,.whiteKey:active{background:var(--selectedKey)}.whiteKey{background:var(--whiteKey);height:118px}.blackKey{height:58px;background:var(--blackKey)}.blackKeySpace{height:0;opacity:0;z-index:-1}input,select{background:var(--block);margin:5px;border:1px solid var(--selectedBlock);border-radius:var(--radius);font:var(--font);font-family:var(--font-family)}input{height:20px}select{height:25px}input[type=range]{height:10px;width:75%}#feedback{position:relative;align-items:center;align-content:center;text-align:center;margin:auto;display:inline}.message{margin:10px;font-size:25px}input[type=checkbox]{height:20px;width:20px}#showAnswerSection,#showAttemptsSection,#showIntervalSection{display:inline-flex;margin:10px 5px 0}#showAnswerSection,.checkShowAnswer{width:121px;min-width:121px}#showAttemptsSection,#showIntervalSection,.checkShowAttempts,.checkShowInterval{width:132px;min-width:132px}.checkShowAnswer,.checkShowAttempts,.checkShowInterval{position:absolute;top:0;left:0;height:25px;border:1px solid var(--unselected);background:var(--unselected);border-radius:var(--radius);color:var(--white)}.checkbox-container input:checked~.checkShowAnswer,.checkbox-container input:checked~.checkShowAttempts,.checkbox-container input:checked~.checkShowInterval{background-color:var(--selected);border:1px solid #000;opacity:1}.checkShowAnswer:after{content:"Show Answer"}.checkShowAttempts:after{content:"Show Attempts"}.checkShowInterval:after{content:"Show Interval"}.checkShowAnswer:after,.checkShowAttempts:after,.checkShowInterval:after{position:absolute;top:2px;left:6px;font:lighter 18px sans-serif}.checkShowAnswer:hover,.checkShowAttempts:hover,.checkShowInterval:hover{background:var(--unselectedHover)}input:checked~.checkShowAnswer:hover,input:checked~.checkShowAttempts:hover,input:checked~.checkShowInterval:hover{background-color:var(--selectedHover)}input:checked~.checkShowAnswer:after,input:checked~.checkShowAttempts:after,input:checked~.checkShowInterval:after{display:block;opacity:1}.checkbox-container{display:block;position:relative;cursor:pointer;font-size:18px;-webkit-user-select:none;user-select:none;height:20px;margin:3px}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}#chordTypeC,#diatonicRootContainer,#directionC,#intervalDirectionContainer,#notesC,#rangeC,#registerC,#scaleC,#startNoteC,#timingC{display:inline-block}#diatonicRootContainer{display:none}button{color:var(--white);display:inline-block;cursor:pointer;background:var(--action);border:1px solid transparent;border-radius:var(--radius);margin:20px 3px 3px;font:var(--font);font-family:var(--font-family);padding:5px;height:35px;box-shadow:0 1px 3px 0 var(--shadow)}svg{transform-origin:left top;transform:scale(1.5);margin:auto;display:block;width:200px}.loadingMessage{position:absolute;margin:auto;height:100vh;width:100vw;top:0;left:0;background:rgba(0,0,0,.5)}.loadingMessage p{position:relative;width:300px;height:50px;font:bolder 70px helvetica;color:#fff;top:120px;margin:auto;padding:40px;text-shadow:0 0 20px #000}.animation{animation-name:keyPress;animation-duration:.1s}@keyframes keyPress{0%{top:2px;left:2px}to{top:0;left:0}}#scoreBoard{display:grid;margin-top:25px;grid-template-columns:60px 120px 60px 95px 60px 75px}.scoreBoardName,.scoreBoardScore,.scoreTitle,.scoreTotal{font:bolder 10px sans-serif}.hide{display:none}.show{display:inherit}.red{color:red}.green{color:green}.black{color:#000}.blue{color:#00008b}.purple{color:purple}.scoreTitle{font-weight:bolder}#results{margin-left:5%;display:grid;grid-template-columns:460px 200px}