@font-face{font-family:Lobster;font-style:normal;font-weight:400;src:url(/fonts/lobster-v20-latin-regular.eot);src:local("Lobster Regular"),url(/fonts/lobster-v20-latin-regular.eot?#iefix) format("embedded-opentype"),url(/fonts/lobster-v20-latin-regular.woff2) format("woff2"),url(/fonts/lobster-v20-latin-regular.woff) format("woff"),url(/fonts/lobster-v20-latin-regular.ttf) format("truetype"),url(/fonts/lobster-v20-latin-regular.svg#Lobster) format("svg")}@font-face{font-family:Open Sans;font-style:normal;font-weight:300 800;src:local("Open Sans"),url(/fonts/open-sans.woff2) format("woff2-variations")}@font-face{font-family:Material Icons;font-style:normal;font-weight:300 800;src:url(/fonts/MaterialIcons-Regular.ttf) format("truetype")}:root{--sans-serif-font: "Open Sans", sans-serif;--lobster-font: Lobster, sans-serif;--custom-vh: 1px}:root{font-size:18px;font-family:var(--sans-serif-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,#mobile-menu li{font-family:var(--lobster-font)}.material-icon{font-family:Material Icons;display:inline-block}.fullscreen-btn-container{display:flex;justify-content:flex-end;padding:1rem}.fullscreen-btn-container--hidden{display:none}.fullscreen-btn{display:inline-flex;align-items:center;justify-content:center;background-color:#802121;border:solid 1px #420707;border-radius:8px;opacity:.7;color:#f3e9e9;cursor:pointer}.fullscreen-btn:hover{background-color:#a33030;opacity:1}.fullscreen-btn_icon{font-size:1.5rem}.in-fullscreen-mode .enter-fullscreen-btn{display:none}.in-fullscreen-mode .exit-fullscreen-btn{display:inline-flex}.exit-fullscreen-btn{display:none}html{background-color:#550e0e;height:100%}body{background-color:#4f382c;background-image:url(/images/diagonale-pattern.png);background-repeat:repeat;color:#f3e9e9;min-width:100vw;height:100%;overflow:visible;padding:0;margin:0;text-size-adjust:220%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:220%;-ms-text-size-adjust:220%}.body-container{max-width:1500px;max-height:1000px;height:100%;margin:auto;position:relative}h1{font-size:2.6rem}h2{font-size:1.7rem}p,ul{font-size:.8rem}.app-and-loader{color:#fff;position:relative}#app-root{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;z-index:0}.global-app-loader{position:absolute;top:50%;left:50%;display:flex;gap:.5rem;transform:translate(-50%,-50%)}.global-app-loader_animated-img{width:100px;height:100px;background-image:url(/images/loading-animation.svg);background-repeat:no-repeat;background-size:cover;animation:global-loading-anim 1s steps(2,jump-none) infinite}@keyframes global-loading-anim{to{background-position-x:100%}}.global-app-loader_text{font-family:var(--sans-serif-font)}.app-start-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:1rem 2rem;font-size:2rem;font-family:var(--lobster-font);background-color:#802121;border:solid 3px #420707;border-radius:8px;color:#fff;cursor:pointer}.app-start-btn:hover{background-color:#a33030}.app-and-loader--initial #app-root{opacity:0;pointer-events:none}.app-and-loader--initial .global-app-loader{visibility:hidden}.app-and-loader--initial .app-start-btn{display:block}.app-and-loader--loading #app-root{opacity:0;pointer-events:none}.app-and-loader--loading .global-app-loader{display:flex;visibility:visible}.app-and-loader--loading .app-start-btn{display:none}.app-and-loader--loaded #app-root{opacity:1;transition:opacity .5s}.app-and-loader--loaded .global-app-loader,.app-and-loader--loaded .app-start-btn{display:none}.above-app-section{display:flex;align-items:center;justify-content:space-between;max-width:100%;height:12%;margin:auto;padding-top:10px}#title-section{flex:1;display:flex;gap:.8rem}#title-section img{max-width:72px;width:9%;margin-left:2%;object-fit:contain}#title-section h1{margin:1% 0 0;color:#eeebea;align-self:flex-end}#cocotonic-block{margin:0 20px 0 0;align-self:flex-end;display:flex;justify-content:flex-end;align-items:flex-end}#cocotonic-block a{text-decoration:none;color:#fff}#cocotonic-block img{width:220px;margin-bottom:.5em}.cocotonic-logo-stack,#cocotonic-block-on-phone{display:none}#songs-list a{color:#f3e9e9;text-decoration:none}#songs-list ul{list-style:none}#songs-list li{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.info-box{background-color:#802121;padding:1% 2%;overflow:auto}.icon{vertical-align:bottom}#controls-section li:last-child{margin-bottom:0}.icon{height:1.3em}#mouse-icon{width:1.3em;height:auto}#mobile-menu li{flex:1;color:#f3e9e9;display:inline-block;font-size:1.5rem;text-align:center;height:100%}@media (max-width: 700px){#mobile-menu li{font-size:1.2rem}}#mobile-menu li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;background-color:#802121;opacity:.7}#mobile-menu li a:hover{background-color:#a33030;opacity:1}#mobile-menu li a.active{background-color:#802121;opacity:1}#mobile-menu,#mobile-menu-canceler{display:none}@media (min-width: 1001px) and (min-height: 751px){.fullscreen-btn-container{display:none}#controls-section li{margin-bottom:3%}h2{margin-bottom:1%;margin-top:0}.app-and-loader{height:68%;max-height:900px;max-width:1300px;margin:auto;background-color:#3a393a;border:15px solid #101010}.info-box{box-shadow:2px 5px 17px #000}#UI-top-layer{position:absolute;inset:0 10px;pointer-events:none}#UI-top-layer button{pointer-events:auto}#info-boxes-container{position:absolute;left:0;right:0;bottom:2%;display:flex;flex-direction:row;justify-content:flex-start;gap:15px;pointer-events:auto}#about-section{width:48%}#controls-section{position:absolute;top:15%;left:0}#songs-section{min-width:195px;width:17%}#songs-list{display:flex;flex-direction:row;justify-content:center;margin-top:5%}#songs-list ul{min-width:23%;list-style:none;margin:0 4% 0 0;padding-left:0}#songs-list ul:last-child{min-width:23%;list-style:none;margin:0;padding-left:0}#songs-list li{margin-top:1%}}@media (min-width: 1001px) and (max-width: 1500px) and (min-height: 751px){:root{font-size:17px}}@media (max-width: 1000px),(max-height: 750px){:root{font-size:20px}body{background-color:#3a393a;background-image:none}h1{font-size:2.1rem}@media (min-width: 701px) and (max-width: 1000px){h1{font-size:1.7rem}}@media (min-width: 451px) and (max-width: 700px){h1{font-size:1.3rem}}@media (max-width: 450px){h1{font-size:1rem}}h2{margin-bottom:1%;margin-top:0}@media (min-width: 501px) and (max-width: 800px){.app-start-btn{font-size:1.7rem;padding:.5rem 1rem}}@media (max-width: 500px){.app-start-btn{font-size:1.5rem;padding:.3rem .7rem}}.body-container{margin:0}.app-and-loader{height:70%}.above-app-section{height:auto}#cocotonic-block{width:13%;max-width:none;margin:0 30px 0 0;display:flex;justify-content:center;align-items:center}.cocotonic-logo-stack{display:inline-block}.cocotonic-logo{display:none}#cocotonic-block img{width:150px;max-width:100%;margin:auto}#controls-section li{margin-bottom:1%}#info-boxes-container{display:block}.info-box{display:none;position:static;padding:1% 3%}.info-box.show{display:block}.info-box h2{display:none}#songs-list{display:flex;justify-content:center}#songs-list ul{min-width:23%;margin-right:2%}#title-section h1{margin:1% 0 0}#controls-section{position:static;padding:7px 10px}#UI-top-layer{position:absolute;top:auto;bottom:0;right:0;z-index:101;width:65%}#mobile-menu-canceler.show{display:block;position:absolute;z-index:100;inset:0}#mobile-menu{display:flex;gap:2%;width:100%;height:2rem;padding:0;margin:0;pointer-events:auto}}@media (max-width: 550px) and (max-aspect-ratio: 1/1){.body-container{transform:rotate(-90deg) translate(-100%);transform-origin:left top;overflow-x:hidden;width:calc(var(--custom-vh) * 100);height:100vw}@media (max-height: 1000px){h1{font-size:2.1rem}}@media (min-height: 701px) and (max-height: 1000px){h1{font-size:1.7rem}}@media (min-height: 451px) and (max-height: 700px){h1{font-size:1.3rem}}@media (max-height: 450px){h1{font-size:1rem}}@media (min-height: 501px) and (max-height: 800px){.app-start-btn{font-size:1.7rem;padding:.5rem 1rem}}@media (max-height: 500px){.app-start-btn{font-size:1.5rem;padding:.3rem .7rem}}}.App{--app-scale: 0;--app-width-before-scaling: 1800;--app-height-before-scaling: 700}.App img{pointer-events:none}.App{display:flex;flex-direction:column;justify-content:center;align-items:stretch;position:absolute;top:50%;left:50%;transform-origin:top left;transform:scale(var(--app-scale)) translate(-50%,-50%);width:calc(var(--app-width-before-scaling) * 1px);height:calc(var(--app-height-before-scaling) * 1px);margin:auto;-webkit-user-select:none;user-select:none}.app_top-options-section{display:flex;justify-content:flex-end;padding:0 70px}.app_blowing-mode-info{width:130px;max-width:17%}.app_harmonica-container{position:relative;align-self:center;display:flex;width:fit-content}.app_action-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:13% 74% 13%;width:100%;height:32%}.app_action-overlay-left{padding-left:40px;padding-right:60px}.app_notes-container{height:100%;display:grid;grid-template-columns:repeat(10,1fr);gap:1%}.app_bottom-options-section{margin-top:20px;padding:0 70px}.app_blowing-mode-switch{max-width:17%;max-height:100%}.harmonica-key-selector{display:flex;height:100%}.harmonica-key-selector_label{display:flex;align-items:center;gap:.1rem;width:100%}.harmonica-key-selector_label-text{color:#eee;font-size:1.2rem;font-weight:700}.harmonica-key-selector_select{flex-grow:1;font-size:1.8rem;font-weight:800;text-align:center;color:#353535;padding:0}.harmonica-key-selector_option{font-size:1.2rem;text-align:left}@media (max-height: 700px){.harmonica-key-selector_option{font-size:1rem}}.hole-button{background-color:#dcdcdc80;border:none;font-weight:800;font-size:2rem;color:#5a5a5a}.hole-button--active{background-color:#97ff8a80}.blowing-mode-switch{padding:0 2rem;background-color:#6c6c6c;border:none;border-radius:5px;border-top:solid 2px #e4e4e4}.blowing-mode-switch:hover{background-color:#727272}.blowing-mode-switch--active{border-top:solid 2px #575757;transform:scale(.97)}