body{margin:0}h1,p{margin:0;padding:5px}.container{background:#6df5ff;text-align:center}.title{padding:10px;text-align:center}.textArea{height:250px;width:800px;padding:10px;border-radius:5px;outline:none;font-size:20px}.keyboard{margin:auto;width:842px;border:2px solid gray;border-radius:5px;padding:5px;background:#9efaeb}.row{display:flex}.key{height:42px;width:42px;margin:5px;flex-shrink:0;border:1px solid black;border-radius:5px;line-height:40px;cursor:pointer;background:#b4faff;transition:.3s;font-size:20px}@media (hover: hover){.key:hover{background:green}}.key.active{border-radius:50px;background:#fc0505}.ArrowUp{background:black;color:white}.Space{width:349px}.Backspace,.Tab,.Delete,.CapsLock,.Enter,.ShiftLeft,.ShiftRight,.ControlLeft,.MetaLeft,.AltLeft,.AltRight,.ArrowLeft,.ArrowDown,.ArrowRight,.ControlRight{background:black;color:white;flex-shrink:1;width:100%}