html { background: #22252c url(../wallpaper.png) center center; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } body { color: #afbfbf; font-size: 24px; } input { display: block; } .container { width: 400px; height: 100%; margin: 0 auto; vertical-align: middle; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; text-align: center; } .login { position: absolute; top: 45%; left: 50%; margin-left: -200px; width: 400px; } .info { position: absolute; bottom: 5%; left: 50%; margin-left: -200px; width: 400px; } .login { height: 50%; } input { width: 100%; text-align: center; font-size: 36px; border: none; background: rgba(34, 37, 44, 0.25); padding: 6px 6px 2px; margin: 0; margin-left: -6px; outline: none; color: #dfdfdf; border-radius: 4px; border-bottom: 2px solid #3f3f3f; } .messageBox { text-align: center; visibility: hidden; }