/* The registration page - plain, close to jox-it.de (styles.css there). */
:root {
	--bg: #ffffff;
	--text: #0e1525;
	--muted: #5a6478;
	--border: #e3e6ec;
	--brand: #2470ff;
	--brand-hover: #0d3b9c;
	--ok: #1d7a45;
	--error: #b3261e;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
}

header, main, footer {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem;
}

header { border-bottom: 1px solid var(--border); }
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

.logo { font-weight: 700; font-size: 1.3rem; color: var(--text); }
.logo span { color: var(--brand); }

h1 { font-size: 1.7rem; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }

label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; }

input {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font: inherit;
	border: 1px solid var(--border);
	border-radius: 6px;
}

input:focus { outline: 2px solid var(--brand); outline-offset: 0; }

.btn {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.65rem 1.2rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--brand);
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.btn:hover { background: var(--brand-hover); color: #fff; }

.buttons .btn { margin-right: 0.5rem; }

.hint { color: var(--muted); font-size: 0.9rem; font-weight: 400; margin: 0.25rem 0 0; }
.or { color: var(--muted); margin-top: 1.5rem; }

.ok { color: var(--ok); }
.error { color: var(--error); }
ul.error { padding-left: 1.2rem; }