body{margin:10px;overflow:hidden;background-color:#c9dc97}.main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.keyboard-container{position:relative;width:fit-content;padding-left:2px}.keyboard-container img{position:absolute;left:-234px;top:0;width:234px}.keyboard-container img[style*="scaleX(-1)"]{left:100%;right:-234px}.note{font-size:.5em;color:#555;margin-top:10px}.key{border:2px solid #000;border-radius:10px;display:inline-block;width:50px;height:50px;text-align:center;background:#a3b47b7b}.key p{line-height:50px;margin:0;font-weight:700;font-family:UnifrakturMaguntia,Blackletter,serif}.key.active{width:46px;height:46px;background:#6473417b;border:4px solid #000}.keyboard{display:flex;flex-direction:column;align-items:center;margin-top:20px}.key-row{display:flex;justify-content:center}.key{margin:2px}.space,.space.key.active{width:240px}.letter{display:inline-block;font-size:1.5em;color:#d4eecc;min-width:.3em;font-family:UnifrakturMaguntia,Blackletter,serif;border-bottom:2px solid transparent;line-height:1em;vertical-align:bottom}.letter.active{color:#489331;font-weight:700}.letter.current{color:#90ee90;animation:blink 1s infinite;border-bottom:2px solid #90EE90}@keyframes blink{0%,to{opacity:1}50%{opacity:.7}}.typing-test{background:#a3b47b7b;border:2px solid #333;border-radius:10px;padding:20px;position:relative;display:inline-block}.play-button{border:2px solid #000;border-radius:10px;display:inline-block;width:50px;height:50px;text-align:center;background:#a3b47b7b;cursor:pointer;transition:all .1s ease;font-weight:700;font-family:UnifrakturMaguntia,Blackletter,serif}.play-button:hover{background:#8ca06499}.play-button:active{transform:scale(.95);width:46px;height:46px;background:#6473417b;border:4px solid #000}