@font-face {
  font-family: Celestia Redux;
  src: url(pony.ttf); }

.reg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 460px;
  margin-top: -230px;
  margin-left: -150px; }

h2 {
  text-align: center;
  font-family: Celestia Redux;
  font-size: 20pt;
  padding: 5px; }

form {
  margin: 0; }

input {
  text-align: center;
  font-family: Celestia Redux;
  font-size: 20pt;
  width: 300px;
  padding: 5px;
  border: 1px solid #c9c9c9;
  border-radius: 3px; }

input:focus {
  border-color: #57BCEB;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07) inset, 0 0 3px #00A8FF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07) inset, 0 0 3px #00A8FF;
  outline: none; }

button {
  width: 300px;
  height: 48px;
  text-align: center;
  font-family: Celestia Redux;
  font-size: 20pt;
  background: #66cfff;
  background: -moz-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cfff), color-stop(100%, #2abcfe));
  background: -webkit-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
  background: -o-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
  background: -ms-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
  background: linear-gradient(top, #66cfff 0%, #2abcfe 100%);
  border: 1px solid #27ace8;
  border-radius: 3px;
  color: #fff;
  cursor: pointer; }

button:hover {
  background: #2abcfe; }

button:active {
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset; }