*, ::after, ::before { box-sizing: border-box; } html { height: 100%; line-height: 1.5; } body { color: #212529; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; margin: 0; padding: 0; } .clear::after { clear: both; content: ''; display: block; height: 0; line-height: 0; margin: 0; padding: 0; } html { min-height: 100%; height: 100%; position: relative; } body { margin: 0; padding: 0; position: relative; width: 100%; min-height: 100%; height: 100%; height: auto; display: table; } a { color: #0d6efd; text-decoration: none; } a:hover { text-decoration: underline; } .wrapper { padding: 15px; text-align: center; display: table-cell; vertical-align: middle; } h1, h2 { font-weight: 400; font-size: 34px; line-height: 36px; margin: 10px 0; } h2 { font-weight: 350; font-size: 14px; line-height: 18px; margin-bottom: 0; } .form-control { background-clip: padding-box; background-color: #fff; border-radius: 4px; border: 1px solid #ced4da; color: #495057; display: inline-block; font-family: inherit; font-size: 16px; height: 38px; line-height: 1.5; margin: 0; overflow: visible; padding: 6px 12px; transition: box-shadow .15s ease-in-out; vertical-align: middle; } .form-control:focus { background-color: #fff; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%); color: #495057; outline: 0; } .btn { border-radius: 4px; border: 1px solid transparent; color: #fff; display: inline-block; font-size: 16px; font-weight: 400; height: 38px; line-height: 1.5; padding: 6px 12px; text-align: center; text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; user-select: none; vertical-align: middle; white-space: nowrap; } .btn:focus, .btn:hover { text-decoration: none; } .btn:focus { box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); outline: 0; } .btn:not(:disabled):not(.disabled) { cursor: pointer; } .btn.blue { background-color: #0d6efd; border-color: #0d6efd; } .btn.blue:hover { background-color: #0b5ed7; border-color: #0a58ca; } .btn.blue:focus { box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%); } form { margin-top: 15px; } button { margin-left: 15px; } @media only screen and (max-width:800px) { .wrapper { padding: 15px 0; } h1, h2 { padding: 0 15px; } form { display: block; padding: 0px 15px; } form .form-control, form .btn { display: block; width: 100%; } form button { margin-left: 0; margin-top: 15px; } }