html, body { padding: 0; margin: 0; height: 100%; font-family: 'Roboto' , sans-serif; font-size: 1em; }
form { padding: 0; margin: 0; font-family: 'Roboto' , sans-serif; font-size: 1em; }

header, footer, section, nav { display: block; }

.container { }
.content { margin: auto; padding: 1em; }
h2 { text-align: center; color: #82bc00; }

header { text-align: center; margin-bottom: 2em; }
.input-row { box-sizing: border-box; margin: 0.6em; }
.input-row input { width: 100%; padding: 0.5em; box-sizing: border-box; font-family: 'Roboto' , sans-serif; font-size: 1.1em; font-weight: normal; }
.input-row button { font-size: 1.2em; padding: 0.4em; width: 100%; background-color: #82bc00; border: 1px solid #82bc00; color: White; font-weight: normal; }
.input-row button:hover { background-color: #6b9a00; }
.input-row button:active { background-color: #25718f; }

.login-error { box-sizing: border-box; margin: 0.6em; color: #A60000; text-align: center; border: 1px solid #A60000; padding: 0.4em; }

footer { font-size: 0.7em; color: #555; padding-top: 3em; text-align: center; }
footer div { margin: 0.5em; }
.login-alt img { margin-left: auto; margin-right: auto; display: block; }

p { text-align: center;padding-top: 1em; }
p a { font-size: 0.9em; color: #82bc00; text-decoration: none; }
p a:hover { text-decoration: underline;}

@media screen and (min-width: 500px) {

    .login-alt { position: relative; }

    .login-alt { width: 25em; height: 100%; box-sizing: border-box; background-color: rgba(255,255,255,0.85); padding: 1em; }
    .login-alt img { padding: 2em 1em 4em 0em; }
    .container { background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 100%; }
    .content { display: none; }

    footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.0em; }
}