.menu-page{background-image:var(--background-image-desktop);background-size:cover;background-position:center 95%;background-repeat:no-repeat;width:100%;height:100vh;position:relative}.menu-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.menu-header{font-family:var(--font-main);color:var(--text-color);font-size:6rem;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.menu-options{display:flex;flex-direction:column;gap:2rem;margin-top:3rem}.menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background-color:var(--main-color-dark);border-radius:1.5rem;font-size:1.5rem;color:var(--text-color);text-decoration:none;cursor:pointer;font-family:var(--font-main);box-shadow:0 8px #076978,0 8px 20px #00000026;transition:transform .15s ease,box-shadow .15s ease,background-color .3s ease;width:20rem}.menu-button:hover{background-color:var(--main-color-dark-hover);transform:scale(1.05)}.menu-button:active{transform:scale(.98)}.menu-fox-img{position:absolute;height:50%;bottom:1rem;right:1rem}@media (max-width: 639px){.menu-page{background-image:var(--background-image-mobile);background-size:cover;background-position:center 90%;background-repeat:no-repeat}.menu-header{font-size:5rem}.menu-fox-img{display:none}}@media (min-width: 640px) and (max-width: 1023px){.menu-fox-img{display:none}}@media (min-width: 1024px) and (max-width: 1200px){.menu-fox-img{height:15rem}}.game-header{display:flex;flex-direction:row;width:100%;justify-content:space-around;flex:0 0 8%;font-size:1.2rem}.game-page{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden;align-items:center;background-color:#d0f0ef}@media (orientation: portrait){.game-page{background-color:red}}.rotate-message{display:none}@media (orientation: portrait){.rotate-message{display:flex;position:fixed;inset:0;background-color:var(--main-color-light);color:var(--text-color-dark);font-family:var(--font-quaternary);justify-content:center;align-items:center;font-size:2.5rem;text-align:center;z-index:9999;padding:1rem}}@media (hover: none) and (max-width: 1000px){.game-header{font-size:.8rem}}.game-nav{background-color:#0b9faf;display:flex;flex-direction:row;align-items:center;gap:2rem;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);padding:.5rem 1rem;height:100%;cursor:pointer;z-index:100}.game-nav .menu-icon{height:2rem}.game-nav .menu-icon:hover{transform:scale(1.2)}.tooltip-container{position:relative;display:inline-block}.tooltip-text{display:none;transition:opacity .2s ease;position:absolute;top:120%;left:50%;transform:translate(-50%);background-color:var(--text-color);color:var(--text-color-dark);font-family:var(--font-quaternary);padding:.375rem .625rem;border-radius:var(--radius);white-space:nowrap;z-index:999;font-size:1rem;pointer-events:none;box-shadow:0 4px 4px #0000001a}.tooltip-container:hover .tooltip-text{display:inherit}.songs{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#d0f0ef;z-index:9998;display:flex;flex-direction:column;overflow-y:auto;align-items:center}.songs-title{font-family:var(--font-quaternary);font-size:2rem;color:#262d42;padding:2rem;background-color:#d0f0ef;text-align:center}.songs-header{display:flex;align-items:center;justify-content:center;width:100%;position:relative}.songs-item{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:2rem}.songs-item:hover{cursor:pointer}.songs-wrapper{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;width:100%;padding:2rem 0 2rem 2rem}.back-icon{transition:transform .3s;position:absolute;top:calc(50% - 1.3125em);left:2rem}.back-icon:hover{transform:scale(1.05)}.songs-menu__closed{display:none}.songs-menu__opened{display:block}@media (min-width: 640px) and (max-width: 1023px){.songs-item{flex-direction:column;width:100%;align-items:center}.songs-wrapper{padding:2rem 0 2rem 1.5rem}}.song{display:flex;flex-direction:column;position:relative;transition:transform .3s;flex:1}.song-star{position:absolute;top:0;right:0;padding:.2rem;width:auto;height:2.81rem}.song-img{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.song:hover{transform:scale(1.05)}.song-footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:var(--main-color-dark);font-family:var(--font-tertiary);color:#fff;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;padding:1rem}.song-footer__select{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}.song-footer__select img{width:2rem}.songs-menu__closed .songs{display:none}@media (max-width: 1023px){.song{width:50%;max-width:calc(100% - 4rem)}}@media (min-width: 1024px) and (max-width: 1199px){.song{width:40%;max-width:calc(50% - 2rem)}}@media (min-width: 1200px){.song{width:30%;max-width:calc(100% / 3 - 2rem)}}.keyboard-wrapper{display:flex;justify-content:center;align-items:center;width:100%;font-family:Arial,sans-serif;flex:1}.keyboard{display:flex;width:80%;height:70%;justify-content:center;position:relative;align-items:flex-start}.keyboard-white{fill:#fff;display:flex;align-items:flex-start;gap:.05%;z-index:2;width:100%;height:100%;position:relative}.keyboard-black{width:100%;height:100%;position:absolute;z-index:3;top:0;left:0;pointer-events:none}.key{display:flex;justify-content:center;align-items:center;height:100%;width:100%;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);cursor:pointer;transform-origin:top;box-shadow:0 4px 4px #0000001a;z-index:2}.key:focus{outline:none}.key:disabled{cursor:not-allowed}.key.black{position:absolute;z-index:10;width:calc(100% / 22);height:60%;border-left:.15rem solid #171A26;border-right:.15rem solid #171A26;border-bottom:.15rem solid #171A26;border-top:none;background:linear-gradient(165.19deg,#232a3d .7%,#323a56 84.98%);box-shadow:inset 0 -4px #21283b,0 4px 4px #00000040;transform:translate(-50%);pointer-events:auto;transition:transform .1s ease,filter .1s ease}.key.black.black-key__simulated,.key.black:hover{background:linear-gradient(180deg,#323A56 40%,var(--key-color) 100%)}.key.black:active,.key.black.key-black__pressed{transform:translate(-50%) scaleY(.97);background:linear-gradient(180deg,#323A56 40%,var(--key-color) 100%)}.key.black:focus{outline:none}.key.black.black-key_touch{background:linear-gradient(180deg,#323A56 40%,var(--key-color) 100%)!important}@media (hover: none){.key.black:not(.black-key__simulated){background:linear-gradient(165.19deg,#232a3d .7%,#323a56 84.98%)!important}}.key-label__text{font-family:var(--font-secondary);font-weight:400;text-align:center;line-height:1}.key-wrapper{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.key.white{border:1px solid #F2F2F2;background:linear-gradient(180deg,#fff .95% 97.37%);transition:transform .1s ease;transform-origin:top}.key-extension{position:absolute;bottom:-.5rem;width:98%;height:3rem;background-color:#d9d9d9;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;z-index:1;box-shadow:0 4px 4px #00000040;transition:transform .1s ease;transform-origin:top}.key.white.white-key__simulated,.key-wrapper:hover .key.white,.key.white.white-key__pressed{background:linear-gradient(180deg,#FFFFFF 60%,var(--key-color) 100%)}.key-wrapper:hover .key.white.white-key_touch{background:linear-gradient(180deg,#FFFFFF 60%,var(--key-color) 100%)!important}.key-wrapper:hover .key-extension{filter:brightness(.9)}.key.white:active,.key.white.white-key__pressed{transform:scaleY(.97)}.key.white:active+.key-extension,.key.white.white-key__pressed+.key-extension{transform:scaleY(.8);box-shadow:none;filter:brightness(.8)}@media (hover: none){.key.white:not(.white-key__simulated){background:linear-gradient(180deg,#fff .95% 97.37%)!important}}.game-area{position:relative;width:100%;height:50vh;min-height:170px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;z-index:0}.music-stave-container{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.motion-wrapper{position:absolute;object-fit:contain}.notes-wrapper{position:absolute;width:100%;height:100%;left:0;overflow:visible;pointer-events:none;z-index:3;display:flex;align-items:center}.note-svg{transition:color .3s ease}div.motion-wrapper .note-svg.note-hit{color:var(--main-color-dark)!important}.stave{display:flex;flex-direction:row;align-items:center;position:absolute;width:100%;height:100%;z-index:2}.lines{position:relative;display:flex;flex-direction:column;gap:30px;width:100%;justify-content:center;flex:1;height:125px}.clef{position:absolute;display:flex;align-items:center;left:-50px;top:-33px}.clef img{width:auto;height:200px;z-index:3}.line{background-color:#262d42;height:1px;width:100%}.score-detail__wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;flex:1}.score-detail__name{font-family:var(--font-quaternary);color:var(--text-color-dark)}.score-detail__points{font-family:var(--font-secondary);font-weight:400;color:var(--text-color-dark)}.song-detail__wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;flex:1}.song-detail__name{font-family:var(--font-quaternary);color:var(--text-color-dark)}.song-detail__time{font-family:var(--font-secondary);font-weight:400;color:var(--text-color-dark)}.overlay{position:absolute;bottom:0;height:100%;width:100%;background-color:var(--main-color-overlay);z-index:var(--zIndex-overlay);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-tertiary);font-size:2rem}.countdown{width:100%;height:100%;font-size:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-secondary)}.play-icon{cursor:pointer}.end-game-wrapper{display:flex;flex-direction:column;align-items:center;background-color:#fff;color:var(--text-color-dark);font-family:var(--font-quaternary);padding:1rem;border-radius:5px;width:23rem;font-size:1.4rem;gap:1rem;z-index:999;max-height:95%}.end-game-buttons{display:flex;flex-direction:row;gap:1rem;color:#fff}.end-button{width:fit-content;padding:.5rem 1rem;border-radius:5px;font-family:var(--font-quaternary);font-size:.8rem}.end-button-primary{background-color:var(--main-color-dark);color:#fff;border:none}.end-button-secondary{background-color:#fff;color:var(--main-color-dark);border:2px solid var(--main-color-dark)}.end-button:hover{cursor:pointer}.end-button-primary:hover{background-color:var(--main-color-dark-hover);color:#fff;border:none}.end-button-secondary:hover{color:var(--main-color-dark-hover);border:2px solid var(--main-color-dark-hover)}.end-game-score-wrapper{display:flex;flex-direction:row;align-items:center;font-size:1.3rem}.end-game-score{color:var(--main-color-dark)}.end-game-img{height:15rem;object-fit:cover}.play-icon-overlay{transition:transform .1s ease}.play-icon-overlay:hover{transform:scale(1.2)}@media (max-width: 640px){.end-game-img{height:10rem}}@media (hover: none) and (max-width: 1000px){.end-game-img{height:10rem}}.timer-wrapper{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:2rem;border-radius:var(--radius);z-index:5;flex:0 0 15%}.timer-container{position:relative;background-color:#fff;width:80%;height:1rem;border-radius:var(--radius);overflow:hidden}.timer-container-disabled{opacity:0}.timer-bar{background-color:var(--main-color-dark);height:100%;position:absolute;top:0;left:0;z-index:1;transition:width .1s linear}@media (hover: none){.timer-wrapper:has(>.timer-container-disabled){flex:0 0 0}}.feedback-text{position:absolute;top:30%;left:47%;transform:translate(-50%,-50%);color:var(--main-color-dark);font-family:var(--font-tertiary);font-size:7rem;min-width:fit-content;text-align:center;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:9997;pointer-events:none;user-select:none}.feedback-text.show-feedback{opacity:1;transform:translateY(0);animation:fadeOut 4s ease-out forwards}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.about-header{font-family:var(--font-main);font-size:6rem;margin-bottom:.5rem;color:var(--main-color-dark);text-align:center}.about-text{text-align:center;font-family:var(--font-tertiary);line-height:2;font-size:1rem}.about-text__cursive{font-style:italic;padding-top:0!important}@media (max-width: 639px){.about-header{font-size:2.5rem}.about-text{font-size:1rem;padding:.5rem .5rem 0}}@media (min-width: 640px) and (max-width: 1023px){.about-header{font-size:3.5rem}.about-text{padding:.5rem .5rem 0}}@media (hover: none) and (max-width: 400px){.template-wrapper{height:85%;font-size:1rem;width:90%}.menu-fox-img{display:none}}.template-page{display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:var(--background-image-desktop);background-size:cover;background-position:center 95%;background-repeat:no-repeat;width:100%;height:100%;position:relative;padding:1rem;min-height:100vh}.template-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:fit-content;max-height:90%;width:70%;color:var(--text-color-dark);background-color:#fff;border-radius:var(--radius);padding:1.5rem;gap:.5rem}.tutorial-button{position:absolute;top:1rem;left:1rem;z-index:2;width:3rem;height:3rem;border-radius:1rem;box-shadow:0 4px #076978,0 4px 20px #00000026}.tutorial-button img{width:1.5rem}.home-icon__tutorial{display:flex;flex-direction:column;background-color:#0b9faf;width:fit-content;padding:.5rem;position:absolute;cursor:pointer;border-radius:.5rem;top:1rem;left:1rem;transition:transform .3s;z-index:2}.home-icon__tutorial img{width:1.5rem}.home-icon__tutorial:hover{background-color:#086c78;transform:scale(1.05)}@media (max-width: 639px){.template-page{background-image:var(--background-image-mobile);background-size:cover;background-position:center 90%;background-repeat:no-repeat}.template-wrapper{height:fit-content;padding:.5rem;width:80%}}@media (hover: none) and (max-width: 400px){.template-wrapper{height:80%;font-size:1rem;width:90%}}.notfound-header{font-family:var(--font-quaternary);color:var(--main-color-dark);font-size:3rem;margin-bottom:.5rem;text-align:center}.notfound-text{text-align:center;font-family:var(--font-tertiary);line-height:2;color:var(--text-color-dark);padding:2rem}@media (max-width: 640px){.notfound-header{font-size:2.5rem}}*,*:before,*:after{box-sizing:border-box;margin:0}:root{--main-color-light: rgba(208, 240, 239, 1);--main-color-dark: rgba(11, 159, 175, 1);--main-color-overlay: rgba(0, 0, 0, .6);--main-color-dark-hover: rgb(7, 124, 137);--background-image-desktop: url(/img/background/mainMenuDesktop.webp);--background-image-mobile: url(/img/background/mainMenuMobile.webp);--text-color: white;--text-color-dark: rgba(38, 45, 66, 1);--font-main: "Fredoka One", sans-serif;--font-secondary: "Quicksand", sans-serif;--font-tertiary: "Quicksand", sans-serif;--font-quaternary: "Titan One", cursive;--radius: 8px}