/*
	Page Styles
	Version 1.0.0
*/

@import url('fonts.css');
@import url('reset.css');

/* PAGE STYLES */
body {
	font: 14px 'Open Sans';
}
a {
	color: #682C1D;
	font-weight: 800;
}
.page-header {
	background-color: #682C1D;
	height: 80px;
	color: white;
	display: flex;
	justify-content: space-between;
}
.page-container {
	display: flex;
	min-height: calc(100vh - 120px);
}
.page-content {
	margin: auto;
}
.page-footer {
	background-color: #144415;
	height: 40px;
	color: white;
	display: flex;
	align-items: center;
}
.page-header a, .page-footer a {
	color: white;
}
.title {
	font: 66px 'Bastian',serif;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 8px;
}
.center {
	text-align: center;
}

.page-footer .copyright {
	font-weight: 600;
	padding: 0 16px;
}

/* LOGIN COMPONENTS */
body {
	background-color: #E6E6E6;
}
.panel {
	max-width: 450px;
	margin: auto;
	padding: 20px;
}
.panel .login-form {
	display: none;
}
.panel .newaccount-form {
	display: none;
}
.panel .resetpassword-form {
	display: none;
}
.panel .login-form:target {
	display: block;
}
.panel .newaccount-form:target {
	display: block;
}
.panel .resetpassword-form:target {
	display: block;
}


.login-logo {
	display: block;
	width: 75%;
	margin: 0 auto 10px;
}
.login-message {
	text-align: center;
	font-weight: 600;
	font-size: 20px;
	margin: 10px 0;
}
.js-message {
	text-align: center;
	font-weight: 600;
	margin: 5px 0;
}
.js-message:not(.show) {
	display: none;
}

input:not([type="hidden"]) {
	box-sizing: border-box;
	border: none;
	border-radius: 2px;
	min-width: 100%;
	padding: 8px;
	margin: 10px 0;
	font: 600 18px 'Open Sans';
	color: #404040;
}
input:not([type="hidden"]):focus {
	outline-color: #80A080;
}
input:not([type="hidden"]).invalid {
	outline: 2px solid rgba(255,0,0,0.5);
	outline: auto 2px red;
}

input[type="button"],
input[type="submit"] {
	background-color: #682C1D;
	font-size: 24px;
	color: white;
	cursor: pointer;
}
input[type="button"]:hover,
input[type="submit"]:hover {
	background-color: #7F3624;
}
input[type="button"]:active,
input[type="submit"]:active {
	background-color: #582519;
}
input[type="submit"][disabled] {
	color: rgba(255,255,255,0.5);
}