html,body{width:100%;height:100%;margin:0;padding:0;box-sizing:border-box}h1,h2{margin:0;padding:0}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:6px;width:721px;height:100%;font-family:sans-serif}.keyboard{width:100%;height:256px;background-color:#888;padding:10px;border-radius:2px;box-shadow:2px 2px #000;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:6px}.container__text{outline:none}.container__hint{color:#555;font-size:.8em;text-align:center}.container__hint:hover{color:#414141}.basic-key{height:40px;display:flex;justify-content:center;align-items:center;border:1px solid #000;border-radius:2px;box-shadow:2px 2px #000;cursor:pointer;user-select:none;transition:100ms ease-out}.basic-key:hover{background-color:#a7a7a7;transform:scale(1.03);transition:100ms ease-out}.active{box-shadow:inset 2px 2px #000;transition:100ms ease-out}.letter,.number{width:40px}.arrowUP,.arrowDOWN,.arrowLEFT,.arrowRIGHT{background-color:#5f5f5f;width:40px}.backspace,.capslock,.shiftL{background-color:#5f5f5f;width:100px}.enter,.shiftR{background-color:#5f5f5f;width:87.8px}.tab,.slash{width:50px}.tab{background-color:#5f5f5f}.del{width:42.8px;background-color:#5f5f5f}.ctrlL,.ctrlR,.altL,.altR,.win{width:40px;background-color:#5f5f5f}.space{width:338px}.stick{background-color:#35601f}body{display:flex;justify-content:center}