*,*::before,*::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	background-image: url(/img/gradient.svg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: 100% 100%;
	
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	min-height: 100vh;

	color: #e1e1e1;

	min-width: 320px;
}

.hidden {display: none;}

#login-form {width: 100%; max-width: 300px; margin: 0 auto; padding: 0 10px;}

.site-name {font-size: 21px; margin: 20px 0; text-align: center;}
.site-name a {color: #fff; font-weight: 900; text-transform: uppercase; text-decoration: none; color: #fc0;}
.site-subname {font-size: 21px; margin: -15px 0 20px 0; text-align: center; font-weight: bold; text-transform: uppercase;}

.message {padding: 7px 12px; color: #fff; text-align: center; margin-bottom: 20px; font-weight: bold;}
.message-error {background-color: #ff5555;}
.message-success {background-color: #5cb85c;}

.field-row {display: flex; align-items: center; margin: 10px 0; flex-wrap: wrap;}
.field-row .name {font-weight: bold; margin-right: 5px; flex: 1 0 50px; padding-right: 10px;}
.field-row .input {flex: 3 0 100px;}
.field-row .input input {width: 100%; height: 40px; font-size: 15px; box-sizing: border-box;}

.centered-row {display: flex; justify-content: center;}
.centered-row input[type=checkbox] {margin: 0;}
.centered-row label {margin-left: 10px;}

.button-row {margin: 25px; text-align: center;}
.button-row button {box-sizing: border-box; padding: 5px 10px; font-size: 15px;}