.keyboard .key{display:inline-block;margin:8px;border-radius:45px;padding:0;background-color:transparent;color:#fff;width:45px;height:45px;text-align:center;line-height:45px;border:1px solid hsla(0,0%,100%,.5);text-decoration:none;-webkit-animation-name:key-hover-out;animation-name:key-hover-out;-webkit-animation-duration:.3s;animation-duration:.3s;font-size:1.1rem}.keyboard .key:visited{color:#fff}.keyboard .key:active{background-color:hsla(0,0%,100%,.5);-webkit-animation-name:key-hover-in;animation-name:key-hover-in;-webkit-animation-duration:.3s;animation-duration:.3s;color:#fff}@-webkit-keyframes key-hover-in{0%{background-color:transparent}to{background-color:hsla(0,0%,100%,.5)}}@keyframes key-hover-in{0%{background-color:transparent}to{background-color:hsla(0,0%,100%,.5)}}@-webkit-keyframes key-hover-out{0%{background-color:hsla(0,0%,100%,.5)}to{background-color:transparent}}@keyframes key-hover-out{0%{background-color:hsla(0,0%,100%,.5)}to{background-color:transparent}}.keyboard .key-center{display:block;margin-left:auto;margin-right:auto}.keyboard .key-row{margin:0;padding:0}.keyboard{padding:0;margin:auto;width:200px}.keyboard .pin{text-align:center;margin-bottom:15px}.keyboard .pin-element{display:inline-block;margin:5px;width:8px;height:8px;border-radius:8px;border:1px solid hsla(0,0%,100%,.5)}.keyboard .pin-element.active{background-color:hsla(0,0%,100%,.5)}