*,* *,:after,:before{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-khtml-user-select:none;-moz-user-select:none}html{overflow:hidden}body{background-color:#656565;font-family:Arial,Helvetica,sans-serif;height:100vh;line-height:normal;overflow-x:hidden;overflow-y:auto;width:100vw}@media screen and (max-width:40em){body{font-size:2.5vw}}.App{--text-color:#2e3440;--background-color:#fff;--opt-hover:#0000001a;background-color:var(--background-color);border:.1em dotted var(--background-color);height:44em;margin:3em auto;position:relative;transition:.3s;user-select:none;-moz-user-select:none;-webkit-user-select:none;width:40em}.App.dark{--text-color:#fff;--background-color:#2e3440;--opt-hover:#fff3;color:#fff;scrollbar-color:#d2d2d2 #2e3645!important}#lightModeBtn{cursor:pointer;filter:brightness(0);position:absolute;right:.5em;top:.3em;width:2em;z-index:1000}.dark #lightModeBtn{filter:brightness(100%)}section{flex-direction:column;justify-content:space-between;padding:1em;width:18.5em}#controls,section{display:flex;user-select:none;-moz-user-select:none;-webkit-user-select:none}#controls{height:15.2em;margin:0 auto .7em;width:-webkit-fit-content;width:fit-content}.form-container{margin:0 auto;position:relative;user-select:none;-moz-user-select:none;-webkit-user-select:none;width:100%}.disable{opacity:.3;pointer-events:none}header{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:2em;position:relative}h1 span{font-size:1.06em}h1{display:inline;margin:0 auto;position:relative;text-decoration:underline;width:-webkit-fit-content;width:fit-content}h1:after{background-color:#bababa;bottom:0;content:"";height:.07em;left:0;position:absolute;width:100%}header h4:not(:last-child){margin:.4em}header h4:last-child{margin:.5em 0 .4em}::-webkit-scrollbar{width:none!important}.datalist{--opt-even:#eee;--opt-odd:#dfdfdf}.input,.option{color:var(--text-color);font-size:inherit;outline:none;padding:.5em .6em;width:100%}.input{background-color:var(--input-bkground);border:.11em solid var(--text-color);border-radius:.4em}.input,.option{cursor:pointer;width:100%}.option{box-shadow:0 0 .4em .2em #0000;margin:.2em auto;padding:.5em .7em}.sound .option{padding:0}.soundOption span{padding:.5em .7em;white-space:nowrap}.datalist .option:nth-child(2n):hover,.option:hover{background-color:var(--opt-hover);box-shadow:0 0 .3em .1em var(--opt-hover)}.show .input{border-radius:.45em .45em 0 0}.datalist-container{border-bottom:none;border-radius:0 0 .45em .45em}.dark .show .datalist-container.sound::-webkit-scrollbar-track,.show .datalist-container.sound::-webkit-scrollbar-track{scrollbar-width:0!important;width:none!important}.show .datalist-container.sound{border-bottom:.15em solid var(--text-color);color:red!important;overflow-y:scroll;scrollbar-width:0}.datalist-container.sound::-webkit-scrollbar,.datalist-container::-webkit-scrollbar{width:none!important}.show .datalist-container{height:var(--datalist-height);position:absolute;scrollbar-width:none;transition:.3s linear;z-index:1000}.datalist{background-color:var(--background-color);border:.11em solid var(--text-color);border-radius:0 0 .47em .47em;border-top:none;display:block;padding:.65em .45em;pointer-events:all;position:relative;transform:translateY(-100%);transition:transform 0s linear;z-index:10}.show .datalist{display:block;transform:translateY(0)}.datalist-container{--datalist-maxHeight:17.5em;--datalist-height:var(--datalist-maxHeight);border-radius:0 0 .47em .47em;height:0;max-height:var(--datalist-height);overflow:hidden;pointer-events:none;transition:0s linear;width:100%;z-index:-10}.controls{display:flex;justify-content:space-evenly;margin:0 auto}.placeHolder{opacity:.5}.soundOption{display:flex;justify-content:space-between}.soundOption span{cursor:pointer;display:flex}.soundOption span:first-child{width:80%}.soundOption span:nth-child(2){align-items:center;display:flex;justify-content:flex-end;padding:0;width:2.8em}.soundOption img{filter:brightness(.5);height:.9em;position:absolute;right:.9em}.dark .soundOption img{filter:brightness(.8)}.audioCtrls{display:flex;flex-direction:column;flex-shrink:0;font-size:.9em;font-size:.84em;height:50%;justify-content:space-around}div.checkbox{flex-shrink:0;padding:0 4em 1em}#volumeControl{align-items:center;display:flex;flex-direction:column;height:1em;height:2em;justify-content:center;margin-bottom:1.1em;padding:0 2em 1em}#volumeControl p{inset-block-start:1em;position:relative}#volumeControl small{-webkit-margin-after:.4em;justify-content:space-between;margin-block-end:.4em}#volume,#volumeControl small{display:flex;inline-size:100%}#volume{--volume-level:50%;align-items:center;background-color:#000;block-size:.25em;border-radius:.12em;cursor:pointer;flex-shrink:0;position:relative}.dark #volume{background-color:#fff}#volume:after,#volume:before{border-radius:50%;content:"";height:.9em;left:calc(var(--volume-level) - .25em);pointer-events:none;position:absolute;width:.9em}#volume:before{background-color:#fff;border:.21em solid #000}.dark #volume:before{background-color:#000;border:.21em solid #fff}#buttons{align-items:center;display:flex;justify-content:space-evenly;width:100%}button{border-radius:.5em;border-width:.02em;cursor:pointer;display:block;flex-shrink:0;font-size:.9em;font-weight:900;height:-webkit-max-content;height:max-content;outline:none;padding:.3em .4em;width:6.5em}.welcome,button{text-align:center}.welcome{text-wrap:balance}.welcome h2{text-decoration:underline}.welcome p{margin:1em 0}#lessonInfoDiv .infoTitle{margin-bottom:.7em;text-align:center;text-decoration:underline}#lessonInfoDiv .lessonDetailsContainer{display:flex;gap:3em;height:9em;justify-content:center;margin:auto;position:relative;top:-.7em;width:90%}#lessonInfoDiv .lessonDetailsContainer .lessonDetails h5{margin-left:2em}#lessonInfoDiv .lessonLog{text-align:center;width:15em}#lessonInfoDiv .lessonLog ul::-webkit-scrollbar-track{width:0}#lessonInfoDiv .lessonLog li{display:flex;font-size:.83em;justify-content:space-between;margin:0 auto .3em;text-align:center;width:80%}#lessonInfoDiv .lessonLog h5{margin:auto;width:-webkit-fit-content;width:fit-content}#lessonInfoDiv .lessonLog span:first-of-type{display:inline-block;text-align:left}#lessonInfoDiv p{text-wrap:balance;margin:.5em 3em 1.5em;text-align:center}#lessonInfoDiv h4,#lessonInfoDiv h5{margin:.5em 1em;white-space:nowrap}#lessonInfoDiv h5{text-align:left}#lessonInfoDiv h4{text-align:center;text-decoration:underline}.lessonLog h4{margin-bottom:0 !}#lessonInfoDiv ul{font-weight:700;height:9em;overflow-y:auto;scrollbar-width:none}.canvasContainer{align-items:center;display:flex;filter:brightness(0);justify-content:center;margin:.3em auto .5em;max-width:95%;padding:.4em;transition:.1s}.noPickDir{margin:-.9em auto .5em!important}.canvasContainer span{color:var(--text-color);display:inline-block;font-family:Times New Roman,Times,serif;font-size:1.25em;font-style:italic;position:relative;text-align:right;top:.56em;width:2.5em}#canvas{flex-shrink:2;width:calc(100% - 2.6em)}.dark .canvasContainer{filter:brightness(1)}#description{display:flex;flex-direction:column;height:6em;justify-content:space-between;margin:0 auto;text-align:center;white-space:nowrap;width:-webkit-fit-content;width:fit-content}#description p{text-wrap:balance;margin-top:.5em;white-space:wrap}#description div{margin:auto;text-align:center;white-space:break-spaces}#description .shortMsg{margin:auto}#description .smallText{font-size:.9em}#description h3:first-child{text-decoration:underline}#description .arrow{position:absolute;top:5%;width:2em}#description .arrowRight{right:5%}#description .arrowLeft{left:5%}#main-display{position:relative}#main-display span{font-weight:100}.exercise{height:.625em;opacity:0;pointer-events:none}.exercise.practice{height:-webkit-fit-content;height:fit-content;opacity:1;pointer-events:all}.info{display:flex;font-weight:600;justify-content:space-between;margin:auto;width:85%}.info span{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:400;width:2.81em}.exercise-description{align-items:flex-end;display:flex;flex-shrink:0;height:3em;width:90%}#main-display .info .time span{text-align:center;width:.6em}#main-display .info .time span:first-of-type{margin-left:.4em}#main-display .info .time span.colon{font-weight:700;position:relative;top:-.13em;width:.4em}#forwardAndBack{align-items:center;cursor:pointer;display:flex;filter:brightness(0);height:3em;justify-content:space-between;margin:auto;width:-webkit-fit-content;width:fit-content}#forwardAndBack .text{white-space:nowrap}#forwardAndBack div{flex-shrink:0;height:70%}.dark #forwardAndBack{filter:brightness(1)}#forwardAndBack img{flex-shrink:0;height:100%;margin:0 20%}#forwardAndBack div:first-child{transform:rotate(180deg)}
/*# sourceMappingURL=main.3c614081.css.map*/