:root {
	--bg: #242228;
	--bg-night: white;

	--text: #615e73;

	--orange: #d0732e;
	--orange-night: #ff5400; /*#ff6d00*/

	--blue: #2e8bd1;
	--blue-light: #76b4e3;
	--blue-lighter: /*#f5fbff;*/ #e9f5ff;
	--blue-dark: #09416b;

	--grey-light: #ced4da;
	--grey-dark: #6c757d;

	--font-main: 'Amatic SC', sans-serif;
	--font-secondary: 'Trebuchet MS', Helvetica, sans-serif;
}

* {
	margin: 0;
	box-sizing: border-box;
	font-family: var(--font-main);
	font-size: 1.2rem;
	letter-spacing: .06rem;
}

html {
	/*font-family: 'Amatic SC';
	font-size: 1.4rem;*/
	color: var(--blue);

}

body {
	background: var(--bg);
	opacity: 0;
	transition: opacity 2s;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.4rem;
}

.reveal {
	opacity: 0;
	transition: opacity 2s;
}

#wrapper {
	width: 100vw;
	height: 100vh;
	margin-top: -5vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--blue);
	user-select: none;
}

.title {
	font-size: 3em;
	font-weight: bold;
}

.cr {
	font-size: 0.8em;
}

/* FORMS */
.login-form {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -5vh;
}

form {
	margin: 0 auto;
	text-align: center;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'] {
	border-radius: .10rem;
	border: 1px solid var(--grey-light);
	padding: .375rem .75rem;
	display: block;
	margin: .50rem;
	outline: none;
	font-family: var(--font-secondary);
	letter-spacing: normal;
	font-size: 0.75rem;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus{
	border: 1px solid var(--blue);
	background: var(--blue-lighter);
	outline: none;
	box-shadow: none;
}

[required] {
    outline: none;
    box-shadow: none;
}

/* BUTTONS */
.btn, input[type='submit'] {
	font-size: 0.85rem;
	padding: .375rem 1.5rem;
	border-radius: .10rem;
	border: 0;
	background: var(--blue);
	color: white;
	margin: .50rem;
	outline: none;
	box-shadow: none;
}

.btn:hover,
.btn:focus,
input[type='submit']:hover,
input[type='submit']:focus {
	/*filter: saturate(0.6) hue-rotate(25deg);*/
	background: var(--blue-dark);
	cursor: pointer;
	outline: none;
	box-shadow: inset 0 0 0px 2px var(--blue);
	border: none;
}

/* MEDIA */
@media (max-width: 600px) {
	html {
		font-size: 1rem;
	}
}