*{box-sizing:border-box;margin:0;padding:0}#root{width:100vw;height:100vh;text-align:center;background-color:#afdbff}.container{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:10px;background-color:#e7f4ff;max-width:1000px;max-height:800px;margin:auto;border-radius:10px}.notes{height:50%;min-height:180px}.notes svg{height:100%!important;width:100%!important}.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;box-shadow:3px 2px 2px 1px #607485;border-radius:0% 0% 5% 5%}.piano-keys .white:hover{background-color:#ffeebe}.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;box-shadow:1px 1px 2px 1px #607485}.piano-keys .black:hover{background-color:#070031}.piano-keys .white:active{background-color:#fada71}.piano-keys .black:active{background-color:#27187e}.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}