html {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: sans-serif;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;

	display: flex;
	flex-direction: column;

	font-family: 'Roboto', 'Noto', sans-serif;
}

#header {
	padding-top: 2em;
	padding-left: 2em;
	padding-right: 2em;
}

#ess-logo {
	max-width: 300px;
}

#intro {
	padding: 1em;
	padding-left: 2em;
	padding-right: 2em;
}

#main-content {
	flex-grow: 1;

	padding: 1em;
	padding-left: 2em;
	padding-right: 2em;

	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

#signup-or-signin {
	flex-grow: 1;

	display: flex;
	justify-content: center;

	background-color: #333333;

	padding-top: 1em;
	padding-bottom: 1em;
}

#signup {
	margin-top: auto;
	margin-bottom: auto;

	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 2em;
	padding-right: 2em;
	border-radius: 0.5em;
	border-width: 2px;
	border-color: #aaaaaa;
	background-color: white;
}

#signup h2 {
	font-size: 20px;
	/* Match the app's signin dialog. */
	font-weight: 500;
	/* Match the app's signin dialog. */

	/* Vertically align everything nicely. */
	align-items: center;
	/* Allow the help icon to move to the right. */
	display: flex;
}

.help {
	/* Move this to the right. */
	margin-left: auto;
}

.icon {
	/* Make a circle. */
	display: block;
	width: 1.2em;
	height: 1.2em;
	line-height: 1.2em;
	border-radius: 50%;
	text-align: center;

	/* Make it look like a link. */
	text-decoration: none;
	background-color: blue;
	color: white;
}

#signupButton {
	background-color: #3f51b5;
	border-color: #3f51b5;
	border-radius: 0.4em;
	color: white;
	padding: 0.5em;
	width: 100%;
	cursor: pointer;
}

#signupButton[disabled] {
	background-color: gray;
	color: lightgray;
	cursor: default;
}

#signin {
	padding-top: 2em;
}

.field {
	display: flex;
	flex-direction: column;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.field-name {
	font-size: 0.7em;
	color: #666666;
	margin-bottom: 0.4em;
}

.field input {
	font-size: 16px;
	/* Match iron-input. */
	box-sizing: border-box;
	border: 0;
	border-bottom: 1px solid black;
	margin-bottom: 0.7em;
}

#signin {
	text-align: center;
}

.buttons {
	margin-top: 1em;
	text-align: center;
}

.buttons button {
	font-size: 1em;
}

#message {
	display: none;

	margin-top: 1em;
	margin-bottom: 1em;

	border: 2px solid #cccccc;
	background-color: #999999;
	border-radius: 0.5em;

	font-size: 0.9em;
	padding: 1em;
}

#message.visible {
	display: block;
}

#message.success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

#message.failure {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

#footer {
	background-color: #cccccc;
	padding-top: 2em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
	font-size: 0.8em;
}

#footer>* {
	margin-bottom: 1em;
}