*{box-sizing:border-box;margin:0;padding:0}#root{width:100vw;height:100vh;text-align:center;background:#c4c4c4}.container{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:10px;background-color:#afafaf;max-width:1000px;max-height:800px;margin:auto;border-radius:10px}.piano{display:flex;margin-top:auto;height:auto}.piano-keys{display:flex;min-height:20px;width:100vw;margin:0 auto;vertical-align:bottom;align-self:end}.piano-keys .white{position:relative;width:14.2828%;background-color:#fff;padding-top:70.25%;border:1px solid #607485;color:#000;z-index:10;border-radius:0% 0% 5% 5%}.piano-keys .white:hover{background-color:#c8ff95}.piano-keys .black{position:relative;vertical-align:top;width:11.424%;height:1%;min-width:0px;background-color:#000;padding-top:41.25%;border:1px solid #607485;color:#000;border-radius:0% 0% 5% 5%;margin:0 -7.14%;z-index:20}.piano-keys .black:hover{background-color:#0b004b}.piano-keys .white:active{background-color:#c8fc50}.piano-keys .black:active{background-color:#2a11b8}.piano-keys .black1{margin:0 -4.284% 0 -7.14%}.piano-keys .black2{margin:0 -5.712%}.piano-keys .black3{margin:0 -7.14% 0 -4.284%}.piano-keys .black>text{width:0px}svg{shape-rendering:auto}#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#2e24af;color:#fff;text-align:center;border-radius:10px;padding:16px;position:fixed;z-index:1;left:50%;top:20px;opacity:70%;font-family:roboto;font-size:20px;font-weight:400}#snackbar.show{visibility:visible;-webkit-animation:fadein .5s,fadeout .5s 1s;animation:fadein .5s,fadeout .5s 1s;opacity:70%}#snackbar.show-ok{visibility:visible;-webkit-animation:fadein .5s,fadeout .5s 1s;animation:fadein .5s,fadeout .5s 1s;opacity:70%;background-color:#37db45;color:#000}@-webkit-keyframes fadein{0%{top:0;opacity:0}to{top:20px;opacity:70%}}@keyframes fadein{0%{top:0;opacity:0}to{top:20px;opacity:70%}}@-webkit-keyframes fadeout{0%{top:20px;opacity:70%}to{top:0;opacity:0}}@keyframes fadeout{0%{top:20px;opacity:70%}to{top:0;opacity:0}}.menu{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:#777;width:100%;max-width:600px;max-height:800px;margin:auto;border-radius:10px}.title{margin-top:30px;font-size:80px;font-family:Roboto;font-weight:600;color:#0d00bd}.buttons{position:absolute;top:55%;left:60%;font-size:80px;font-family:Roboto}.buttons a{background-color:#9eff4e;border:none;border-radius:10px 0 0 10px;color:#000;padding:15px 120px 15px 32px;text-wrap:nowrap;text-decoration:none;display:flex;font-size:20px;margin-bottom:20px}.disabled-link{pointer-events:none;background-color:#608060!important;color:#3d3d3d!important}.background{position:relative;height:100%;width:100%;background-image:url(/background.svg);background-repeat:no-repeat;background-size:100% 80%;background-position:100px 150px;background-color:#fffc;background-blend-mode:lighten;min-height:800px}.background svg{width:auto;height:auto}.notes{height:50%;min-height:180px}.vibrate{animation:horizontal-shaking .15s 2}.vertical-shaking{animation:vertical-shaking .3s 1}@keyframes vertical-shaking{0%{transform:translateY(0)}25%{transform:translateY(2px)}50%{transform:translateY(-2px)}75%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes horizontal-shaking{0%{transform:translate(0)}25%{transform:translate(5px)}50%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}.notes svg{height:100%!important;width:100%!important}@media only screen and (max-width: 1000px){.container{position:unset;top:unset;left:unset;-ms-transform:unset;transform:unset}}.result{position:absolute;top:27%;left:90%;-ms-transform:translate(-27%,-90%);transform:translate(-27%,-90%);height:70px;width:70px;display:flex;justify-content:center;align-items:center;font-size:22px;font-family:Roboto;font-weight:600}.result.ok{background-color:#69b369;border-radius:35px;border:2px solid #000000}.result.wrong{background-color:#ff5959;border:2px solid #000000;border-radius:10px}