:root{--color-promary:#0b0b0b;--color-promary-light:#393637;--piano-white:#cac9b4;--piano-white--hovered:#8f8e7f;--piano-white--pressed:#f7f6ea;--piano-black:#272726;--piano-black--hovered:#000;--piano-black--pressed:#30302d}*{box-sizing:border-box;margin:0;padding:0}*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{align-items:center;background-color:#f1f1da;display:flex;font-family:Quicksand,sans-serif;height:100vh;justify-content:center;overflow:hidden;width:100vw}h1,p{font-family:Lato}.content-body .Piano{display:flex;flex:1 1;height:100%;height:87vh;min-width:100%}.content-body .Keyboard{align-items:stretch;background:#f1f1da;display:flex;flex:1 1;flex-direction:row;justify-content:center}.content-body .Key{display:flex;flex:1 1;flex-direction:column;height:auto;justify-content:flex-start;min-width:0;pointer-events:none;position:relative}.content-body .Key .note{opacity:1}.content-body .color-key{grid-gap:0;align-items:stretch;background:#ff0;display:grid;grid-template-areas:"noteName" "staff";grid-template-rows:30vh 1fr;height:100%;width:100%}.content-body .color-key .noteWrapper{align-items:stretch;display:flex;flex-direction:column;gap:1px;grid-area:noteName;justify-content:flex-end;opacity:1;padding-top:10vh}.content-body .color-key .noteWrapper .noteName{display:block;height:auto;width:100%}.content-body .color-key .musical-staff{align-self:flex-end;grid-area:staff}.content-body .Key.on.active .color-key{box-shadow:inset 0 0 3px #000}.content-body .c-mark{border-left:3px solid #000}.content-body .Key .seventh{font-size:24px;position:absolute;text-align:center;top:15%}.content-body .Key .piano-key{border-bottom:1px solid #3f3f3f;border-top:0;z-index:2}@keyframes slide-up{0%{opacity:0}to{opacity:1}}.content-body .Key.black{z-index:3}.content-body .Key.black .piano-key{background-color:#0000;height:30%}.content-body .Key.black .blackPianoKeyContainer{height:100%}.content-body .Key.black .piano-key .blackPianoKeyFiller{height:35%;visibility:hidden}.content-body .Key.black .piano-key .blackPianoKey{background-color:#000;height:65%;pointer-events:all}.content-body .Key.white .piano-key{background-color:#fff;border-left:1px solid #3f3f3f;height:30%;pointer-events:all;position:relative;width:200%}.content-body .Key.on .piano-key.black .blackPianoKey:hover,.content-body .Key.on .piano-key.white:hover{background-color:#aaa;box-shadow:inset 0 0 3px #000}.content-body .Key.off .piano-key.white{background-color:#ddd}.content-body .Key.off .piano-key.black .blackPianoKey{background-color:#666}.content-body .Key.on .color-key{pointer-events:all}.content-body .piano-key.c{left:0}.content-body .piano-key.d{left:-34%}.content-body .piano-key.e{left:-65%}.content-body .piano-key.f{left:0}.content-body .piano-key.g{left:-22%}.content-body .piano-key.a{left:-50%}.content-body .piano-key.b{left:-76%}.content-body .piano-key.b,.content-body .piano-key.e{border-right:1px solid #3f3f3f}.content-body .black{border-top:0;z-index:2}.content-body .text{text-align:center}#loading-screen{align-items:center;background-color:#000;color:#fff;display:flex;flex:1 1;flex-direction:column;height:100vh;justify-content:center}#loading-screen ul.animation li{color:#ccc;display:block;float:left;font-size:2rem;text-shadow:0 -1px 0 #fff,0 1px 0 #000}#loading-screen .anim{animation:music .5s ease-in-out infinite both;-webkit-animation:music .5s ease-in-out infinite both}@keyframes music{0%,to{-webkit-transform:translate3d(0,-10px,0)}50%{-webkit-transform:translate3d(0,10px,0)}}.switch{display:block;height:1.3vw;margin:0 auto;position:relative;width:3.4vw}.switch input{height:0;opacity:0;width:0}.switch .label{padding-top:1vw}.slider{background-color:#929292;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.slider:before{content:"";height:1vw;position:absolute;transform:translate(18%,14%);transition:all .4s;width:1vw}.slider:before,input:checked+.slider{background-color:#fff}input:focus+.slider{box-shadow:0 0 .1vw #fff}input:checked+.slider:before{-webkit-backface-visibility:hidden;background-color:#000;transform:translate3d(calc(2vw + 18%),14%,0)}.slider.round,.slider.round:before{border-radius:1vw}.musical-staff{grid-area:staff;pointer-events:none;position:relative;z-index:10}.musical-staff,.musical-staff svg{height:100%;width:100%}.musical-staff svg>rect{width:0!important}.share{cursor:pointer}.Bottom-Info-Row{background-color:#7fff00;padding:5px;text-align:center}.Bottom-Info-Row a{text-decoration:underline}.share-link{color:#fff;padding:1vw 3vw 4vw}.share-link h2{font-size:2rem;margin-bottom:.4vw}.share-link p{margin-bottom:2vw}.share-link button,.share-link p{font-family:Quicksand,sans-serif;font-size:1.6rem}.share-link button{font-weight:700;height:3.2vw;margin-bottom:.3vw;margin-left:1vw;padding:0 .8vw}.share-link .message{color:green;display:block;font-size:1.6rem;opacity:0;transition:.3s ease-in;visibility:hidden}.share-link .message.show{opacity:1;visibility:visible}.video-error{background:#ff6b6b1a;border:1px solid #ff6b6b;border-radius:4px;color:#ff6b6b;font-size:1.4rem;margin-top:.5rem;padding:.75rem 1rem}.video-url{grid-column-gap:10px;grid-row-gap:1px;align-items:stretch;color:#fff;display:grid;font-size:2rem;grid-template-areas:"head   .   .   " "url   reset submit" "text text text" "currenturl currenturl currenturl ";grid-template-columns:1fr auto auto;grid-template-rows:auto auto 1fr auto;height:100%;justify-items:stretch;padding:1rem;width:100%}.video-url__title{grid-area:head}.video-url__btn--reset{font-size:2rem;grid-area:reset}.video-url__btn--submit{background:green;font-size:2rem;grid-area:submit}.video-url__url-field{font-size:2rem;grid-area:url}.video-url__explainer{grid-area:text}.video-url__currently-watching{grid-area:currenturl}.video__tutorial{color:#fff}.video__tutorial__list{grid-column-gap:10px;grid-row-gap:1px;align-items:end;display:grid;grid-template-areas:"video   video    " "active active " "active active ";grid-template-columns:repeat(2,1fr);grid-template-rows:auto;height:100%;justify-items:start}.video__tutorial__list__item{display:flex;flex-direction:column;height:100%;width:100%}.video__tutorial__list__item__title{color:#fff;margin-top:3vh}.navbar{background-color:#000;color:#fff;float:left;height:100%;justify-content:space-between;padding:.5rem;width:100%}.navbar,.navbar__item{align-items:center;display:flex;flex-wrap:nowrap}.navbar__item{align-content:space-between;flex:1 1 auto;flex-direction:column;height:100%!important;row-gap:10px}.navbar__item .title-wrapper{align-items:flex-end;align-self:center;display:flex;flex:1 1 auto;flex-direction:row}.navbar__item .title{font-size:.9vw;font-weight:700;width:100%}.navbar__item .title.selected{align-self:flex-start;color:#000;margin-bottom:10;text-align:center;z-index:20}.navbar .sub-menu,.navbar .widget-wrapper{align-items:center;align-self:center;display:flex;flex:1 1 auto;flex-direction:column;justify-content:center}.navbar .sub-menu{max-height:50%;min-height:40%;min-width:9.4vw;position:relative}.sub-menu .button{background-color:#fff;border-radius:3em;color:#000;font-weight:700;margin:0 auto;max-height:4vh;min-width:75px;position:relative;text-align:center;vertical-align:middle;width:100%;z-index:11}.sub-menu .button,.sub-menu .button-title{align-self:center;display:flex;flex:1 1 auto;flex-direction:row;justify-content:center}.sub-menu .button-title{align-items:center;flex-wrap:nowrap;font-size:1.6rem;justify-self:center}.menu-root .sub-menu .button{background-color:#0000}.sub-menu .button .clef{max-height:3.5vh}.sub-menu .button.selected{background:#000;color:#fff;z-index:20}.menu-root .sub-menu .button.selected{background-color:#0000}.sub-menu .button.selected .clef{fill:#fff}.sub-menu .button.selected .clef .fil0,.sub-menu .button.selected .clef .fil1{stroke:#fff;fill:#fff}.sub-menu__title{align-self:center;display:flex;font-size:1.6rem;justify-self:center}.sub-menu__item__selected{margin-left:.3vw}.sub-menu hr{background-color:#000;border:1px solid #000;margin:0 auto 2vh;position:relative;width:70%}.sub-menu hr.selected{display:block;z-index:20}.sub-menu__content{align-items:flex-start;background-color:#fff;border-bottom-left-radius:10% 5%;border-bottom-right-radius:10% 5%;box-shadow:5px 3px 15px #666;color:#000;display:flex;flex-direction:column;font-size:1.1rem;font-weight:700;min-width:75px;opacity:0;overflow:scroll;padding:11vh 0 2.7vw;position:absolute;top:-1em;transition:all .3s ease-out;visibility:hidden;width:9.7vw;z-index:9}.sub-menu__content.selected{opacity:1;visibility:visible;z-index:15}.sub-menu__content .items-list{padding-left:.5vw;padding-right:.5vw;padding-top:1vw;width:98%}.sub-menu .label-wrapper{display:flex;font-size:1rem;text-align:center;width:100%}.menu-root .arrow-down{left:50%;max-width:3vh;top:97%}.menu-root .arrow-down:hover{left:50%;top:97%}.menu-root .sub-menu__title{font-size:2vh}.menu-root .sub-menu__title.selected{display:block;left:50%;max-height:5vh;max-width:5vh;position:absolute;top:35%;transform:translate(-50%,-50%)}.menu-root .sub-menu .button{margin-left:1.5em;margin-right:1.5em;padding:0 1.9vw 0 1.8vw}.menu-root .sub-menu .button.selected{color:#000}.menu-root .sub-menu .rootform{align-items:stretch;display:flex;flex-direction:column;flex-wrap:nowrap}.menu-root .sub-menu .octave{align-items:flex-start;display:flex;flex-direction:column;padding:.5vw;transform:translate(20%)}.menu-scale .sub-menu .button{padding:1.2vh 0}.circledButton{align-content:center;align-items:center;background-color:#fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;display:flex;flex-direction:row;flex-wrap:nowrap;height:3.4vw;justify-content:center;max-height:7vh;max-width:7vh;text-align:center;width:3.4vw}.VideoSVG{height:auto;width:60%}.share-svg{height:auto;width:50%}.react-player{overflow:hidden}.half-circle{background-color:red;border:10px solid #000;border-bottom:0;border-radius:0 0 50% 50%/0 0 100% 100%;height:50px;width:200px}.side-menu{grid-gap:0 0;background-color:#fff;display:grid;float:right;gap:0 0;grid-auto-flow:row;grid-template-areas:"area1 . ." "Area2 . ." "Area3 . .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;height:13vh;width:2%}.side-menu img{width:1.5vw}.side-menu .area{display:table;margin:.7vw -.2vw;text-align:center}.area1{grid-area:area1;height:100%}.Area2{grid-area:Area2;height:100%}.Area3{grid-area:Area3}.menu__custom-scale__tone-list{background:#fff;display:grid;grid-template-areas:"tone_1  tone_b2  tone_2   tone_b3  tone_3   tone_4  tone_b5  tone_5  tone_b6   tone_6  tone_7  tone_Maj" " .        .       .       tone_sh2    .      .      tone_sh4  .      tone_sh5    .      .       .     " "color_1 color_b2 color_2  color_b3 color_3  color_4 color_b5 color_5 color_b6  color_6 color_7 color_Maj       " " .      form     form     form     form     form    form     form    form      form    form    form       ";grid-template-columns:repeat(12,2vw);grid-template-rows:1fr 1fr 2fr 2fr;min-height:100%;padding:.6vw;width:100%}.menu__custom-scale__tone-list>*{padding:0}.menu__custom-scale__tone-list .form-check.item--1{grid-area:tone_1}.menu__custom-scale__tone-list .form-check.item--b2{grid-area:tone_b2}.menu__custom-scale__tone-list .form-check.item--2{grid-area:tone_2}.menu__custom-scale__tone-list .form-check.item--b3{grid-area:tone_b3}.menu__custom-scale__tone-list .form-check.item--sh2{grid-area:tone_sh2}.menu__custom-scale__tone-list .form-check.item--3{grid-area:tone_3}.menu__custom-scale__tone-list .form-check.item--4{grid-area:tone_4}.menu__custom-scale__tone-list .form-check.item--b5{grid-area:tone_b5}.menu__custom-scale__tone-list .form-check.item--sh4{grid-area:tone_sh4}.menu__custom-scale__tone-list .form-check.item--5{grid-area:tone_5}.menu__custom-scale__tone-list .form-check.item--b6{grid-area:tone_b6}.menu__custom-scale__tone-list .form-check.item--sh5{grid-area:tone_sh5}.menu__custom-scale__tone-list .form-check.item--6{grid-area:tone_6}.menu__custom-scale__tone-list .form-check.item--7{grid-area:tone_7}.menu__custom-scale__tone-list .form-check.item--△7{grid-area:tone_Maj}.menu__custom-scale__tone-list__colors{grid-column-end:color_Maj;grid-column-start:color_1;grid-row-end:color_Maj;grid-row-start:color_1}.menu__custom-scale__tone-list__form{align-self:end;grid-area:form}.tooltip-topmenu{max-width:200px}.tooltip-keyboard{max-width:600px}.menu-root .form-row{grid-gap:1vw 0;align-items:stretch;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;margin-bottom:.5vw;margin-left:.3vw;margin-top:.5vw}.menu-root .form-check{display:flex;flex-direction:row;justify-content:flex-start;justify-items:flex-start;max-width:150px;transform:translate(20%);width:100%}.menu-root .form-check input[type=radio]{cursor:pointer;left:2vw;opacity:0}.menu-root .form-check-label{border:1px solid #000;border-radius:25%;cursor:pointer;display:block;flex:1 0 auto;left:-2vw;position:relative;text-align:center;transition:all .2s ease-out;width:1.7vw}.menu-root .form-check-input[class^=accidental]+.menu-root .form-check-label{border:1px solid #000;color:#000;flex:1 0 auto;width:1.7vw}.menu-root .form-check .form-check-input:disabled~.form-check-label,.menu-root .form-check .form-check-input[disabled]~.form-check-label{border:none;color:#777;cursor:default}.plugin_root{height:20%;width:20%}.overlay,.plugin_root{position:absolute;z-index:30}.overlay{background-color:#1f1c1c;border-radius:10px;box-shadow:.5vw 1.3vw 2vw #555;font-size:1.5rem;height:40rem;left:0;left:5%;margin:8rem auto;max-height:90%;max-width:90%;overflow:hidden;padding:5px;resize:both;top:7%;transform:scale(96%);visibility:show;width:60rem}.overlay.hide{height:6%!important;transition:all .3s ease;visibility:hidden}.overlay.minimized{background-color:#0000;height:10%!important;resize:none;transition:all .3s ease}.overlay svg{fill:gray}.overlay__grabbar{height:50%;top:-40%;width:100%}.overlay__grabbar:hover{cursor:move}.overlay__header{align-self:stretch;display:flex;height:7rem;width:100%}.overlay__header__buttonContainer{align-items:flex-start;display:flex;height:50%;visibility:visible}.overlay__header__buttonContainer__tooltip:hover{opacity:visible;z-index:51!important}.overlay__header__buttonContainer__button{align-items:flex-end;border:none;display:flex}.overlay__header__buttonContainer__button--minimize{background-color:#0000;border:none;height:100%;margin-right:10px;width:100%;z-index:40}.overlay__header__buttonContainer__button--minimize:hover{background-color:#fff;cursor:pointer!important}.overlay__header__buttonContainer__button--close{background-color:#0000;border:none;height:100%;width:100%;z-index:40}.overlay__header__buttonContainer__button--close:hover{background-color:#fff;cursor:pointer!important}.overlay .content{display:flex;flex:1 1;height:96%;margin-top:-6rem;width:100%}.overlay .content .tabs-wrapper{flex:1 1}.overlay .content .tab-content{flex:1 1;height:100%;overflow:scroll;scrollbar-width:none}.overlay .content .tab-content::-webkit-scrollbar{display:none}.overlay.react-player{display:flex}.overlay iframe{align-items:center;flex:1 1}.overlay iframe,.tabs-wrapper{display:flex;height:100%;width:100%}.tabs-wrapper{flex-direction:column}.tab-content{align-content:center;align-items:center;display:flex;flex:1 1;height:100%;justify-content:center;width:100%;z-index:50}.tab-content .h5{font-size:2rem}.tab-content>.active{display:block;flex:1 1;height:100%}.topmenu{background-color:#000;display:flex;height:15vh;width:100%}.blackout{background:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:2}.content-body{background-color:#000;display:flex;height:85vh;width:100%}.notationSVG{display:block;max-height:4.5vh;min-height:2vh;min-height:90%;min-width:90%;padding:.5vh;width:5vw}.notationSVG .typeA{font-size:2vh}.notationSVG .typeA,.notationSVG .typeB{font-family:Quicksand-Medium,Quicksand;font-weight:700}.notationSVG .typeB{font-size:1.6vh}.selected .notationSVG .typeA,.selected .notationSVG .typeB{fill:#fff}.customScaleSVG{display:block;margin:1rem auto;width:5vw}.customScaleSVG .typeA{font-size:2vh}.customScaleSVG .typeA,.customScaleSVG .typeB{font-family:Quicksand-Medium,Quicksand;font-weight:700}.customScaleSVG .typeB{font-size:1.5vh}.selected .customScaleSVG .typeA,.selected .customScaleSVG .typeB{fill:#fff}.arrow-down{display:block;left:50%;max-width:3vh;padding-top:.1em;position:absolute;text-align:center;top:110%;transform:translate(-50%,-50%);transition:all .2s ease-in-out;width:1.4vw}.arrow-down .arrow-down-SVG{height:.5vw;position:absolute;transform:translate(-50%,50%);width:.8vw}.arrow-down:hover{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:50%;top:115%;transform:translate(-50%,-50%) scaleX(1.1) scaleY(1.1)}.selected .arrow-down{display:none}.arrow-circle{fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:2.39px}.clef{fill-rule:evenodd;height:3vw}.clef,.clef.treble .fil0{shape-rendering:geometricPrecision;image-rendering:optimizeQuality;text-rendering:geometricPrecision}.clef.treble .fil0{fill:none;fill-rule:evenodd;stroke:#131516;stroke-width:42.84;display:inline}.clef.treble .fil1{fill:#131516;stroke:#131516;stroke-width:3}.clef.bass .fil0{fill:none;stroke:#131516;stroke-width:42}.clef.bass .fil1{fill:#131516;stroke:#131516;stroke-width:3}.clef.tenor .fil0{fill:none;stroke:#131516;stroke-width:84}.clef.tenor .fil1{fill:#131516;fill-rule:evenodd;stroke:#131516;stroke-width:1.06991}.clef.alto .fil0{fill:none;stroke:#131516;stroke-width:42}.clef.alto .fil1{fill:#131516;stroke:#131516;stroke-width:3}.share-svg{flex:0 0 auto;margin:30%}.settings-svg{transform:translateY(60%);width:1.5vw}#rootSVG{max-height:5vh;width:5vw}.form-check .label-wrapper{cursor:pointer;font-size:1.1rem;margin-bottom:.6rem;padding-left:2rem;text-align:center;-webkit-user-select:none;user-select:none}.form-check .label-wrapper input{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.form-check .label-wrapper input:checked~.checkmark:after{content:"✓";display:block;font-size:2rem;height:2rem!important;text-align:center;top:-.5rem;width:2rem!important}.form-check .label-wrapper:hover input~.checkmark{background-color:#e4cece}.form-check .label-wrapper .checkmark{background-color:#eee;border:2px solid #000;display:flex;height:2.8rem;left:0;margin-right:.5rem;min-width:2.4rem;top:0}.form-check .label-wrapper .checkmark:after{height:2rem;position:absolute;top:-.2rem;width:2rem}.form-check .label-wrapper .checkmark.checked:after{content:"✓";display:block;font-size:2rem;height:2rem!important;text-align:center;top:-.5rem;width:2rem!important}.form-radio{font-weight:700}.form-radio input[type=radio]{display:none}.form-radio .label-wrapper{display:block;margin-bottom:.1vh;padding:.5vh 0}.form-radio .label-wrapper.active,.form-radio .label-wrapper:hover{background-color:#ddd}.form-radio__label{margin-left:.3vw}.clearfix:after{clear:both;content:" ";display:block;height:0}#root{height:100%;min-width:100%}