@import "theme.less";

#login {
	height: 100%;
	background: #eee;

	.header {
		background: @theme_gradient;
		width: 100%;
		padding: 16px;
		text-align: center;
		color: #fff;

		h1 {
			margin-bottom: 0px;
		}
	}

	.fields {
		display: grid;
		justify-items: center;
		padding: 32px;

		input {
			margin-bottom: 32px;
			border: 0px;
			border: 1px solid #444;
			padding: 8px;
			width: 100%;

			font-size: 1.25em;
			background-color: @background;
			
			&:focus {
				outline: none;
			}
		}

		button {
			border: 1px solid #666;
			background: @background;
			color: #444;
			padding: 12px 24px;
			font-size: 1.25em;
			align-self: center;

			&:hover {
				background: #ddd;
			}
		}

		.auth-failed {
			margin-top: 32px;
			color: #a00;
			background: #fff;
			padding: 16px;
			border-radius: 8px;
		}
	}

}