.keyboard{display:flex;height:100vh;flex-direction:column;justify-content:center;align-items:center}.textcontainer{width:1018px;height:100px;border:1px solid rgba(0,0,0,.25);overflow:auto;border-radius:4px}.textcontainer pre{text-align:left;display:block;width:calc(100% - 40px);height:calc(100% - 40px);margin:0;padding:20px;font-size:20px}.keyboardcontainer{width:90%;display:flex;justify-content:center;margin-top:15px}.container{padding:20px;flex-direction:column;max-width:980px;border-radius:7px;background:#202124}.container,.row{display:flex;justify-content:center;align-items:center}.row{width:100%}.key{display:flex;width:60px;height:60px;margin:5px;justify-content:center;flex-direction:column;align-items:center;background-color:#000;border-radius:4px;color:#fff;font-size:16px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;transition:background-color .15s ease-in-out}.key:hover{background-color:#3c4d56}.row:first-child .key:first-child{width:50px}.row:first-child .key:last-child{width:90px}.row:nth-child(3) .key:first-child{width:105px}.row:nth-child(3) .key:last-child{width:95px}.row:nth-child(4) .key:first-child,.row:nth-child(4) .key:last-child{width:130px}.row:nth-child(5) .key:nth-child(3){width:550px}.key.blink{background-color:#000;color:#fff;scale:.9;font-size:large;animation:blink-animation .1s ease-in-out}@keyframes blink-animation{50%{background-color:#fff}}