+
+#register-form {
+ max-width: 100%;
+ display: grid;
+ grid-template-columns: 49% 49%;
+ grid-column-gap: 2%;
+}
+
+.form-row {
+ max-width: 100%;
+ padding-bottom: 0.25em;
+}
+
+.form-row.medium.left {
+ grid-column-start: 1;
+}
+
+.form-row.medium.right {
+ grid-column-start: 2;
+}
+
+.form-row.large {
+ grid-column-start: 1;
+ grid-column-end: span 2;
+}
+
+/* For a narrow screen, use a single-column for medium form rows. */
+@media screen and (max-width: 600px) {
+ .form-row.medium.left,.form-row.medium.right {
+ grid-column-start: 1;
+ grid-column-end: span 2
+ }
+}
+
+input {
+ width: 100%;
+}
+
+input {
+ box-sizing: border-box;
+
+ height: 40px;
+
+ padding: 10px 12px;
+
+ border: 1px solid #287789;
+ border-radius: 4px;
+}
+
+input:focus {
+ border: 2px solid #44c7ef;
+}
+
+button {
+ display: inline-block;
+ border-radius: 4px;
+ background-color: #287789;
+ border: none;
+ color: white;
+ text-align: center;
+ font-size: 125%;
+ margin-top: .25em;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ width: 200px;
+ transition: all 150ms ease;
+}
+
+button:hover {
+ transform: translateY(-1px);
+ background-color: #44c7ef;
+}
+
+:focus {
+ outline: none;
+}
+::-moz-focus-inner {
+ border: 0;
+}