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:-350px;top:0;width:350px}.keyboard-container img[style*="scaleX(-1)"]{left:100%;right:-234px}.note{font-size:1em;color:#555;margin-top:10px}.key{border:2px solid #000;display:inline-block;width:80px;height:80px;text-align:center;background:#a3b47b7b}.key p{line-height:80px;margin:0;font-weight:700;font-size:2em;font-family:UnifrakturMaguntia,Blackletter,serif}.key.active{background:#6473417b;box-shadow:inset 0 0 0 2px #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:400px}.letter{display:inline-block;font-size:3em;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;padding:20px;position:relative;display:inline-block}.play-button{border:2px solid #000;display:inline-block;width:150px;height:80px;text-align:center;background:#a3b47b7b;cursor:pointer;transition:all .1s ease;line-height:80px;font-size:1.2em;font-weight:700;font-family:UnifrakturMaguntia,Blackletter,serif}.play-button:hover{background:#8ca06499}.play-button:active{background:#6473417b;box-shadow:inset 0 0 0 2px #000}