:root {
	--background: #201F29;
	--background-dim: #292835;
	--background-secondary: #46435E;
	--accent: #D69C63;
	--accent-dim: #E5AF79;
	--text: #E8E1D3;
	--text-dim: #D8D1C3;
	--secondary: #ADA9A1;
	--secondary-dim: #848291;
	--main-col-percentage: 60%;
	--accent-rgb: 214, 156, 99;
	--background-rgb: 32, 31, 41;
}

@keyframes move-it {
	0% {
		background-position: initial;
	}
	100% {
		background-position: -25px 25px;
	}
}

.move-bg {
	background: radial-gradient(var(--accent-dim) 1px, transparent 0);
	background-size: 25px 25px;
	animation: move-it 2s linear infinite;
	box-shadow: inset 0px 0px 200px #201f29;
}

html {
	background-color: var(--background);
	scroll-behavior: smooth;
}

body {
	background: radial-gradient(var(--accent-dim) 1px, transparent 0);
	background-size: 25px 25px;
	animation: move-it 2s linear infinite;
	box-shadow: inset 0px 0px 200px #201f29;
	min-height: 100vh;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}

a,
a *{
	transition: .15s;
}

nav {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--accent);
	margin-right: 1em;
	font-size: 1.2em;
	background-color: #00000000;
	z-index: 100;
	margin-bottom: -2em;
}

nav > span.nav-sep:after {
	color: var(--background-secondary);
	content: ' | ';
}

@media screen and (max-width: 900px) {
	nav > span.nav-sep:after {
		content: '\a';
		white-space: pre
	}
	.space-for-header {
		margin-top: 2em;
	}
}

nav > a {
	text-decoration: none;
	color: var(--secondary);
}

nav > a:hover {
	color: var(--accent-dim);
}

div.float-scroll-to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	padding-bottom: .5em;
	padding-right: .5em;
	z-index: 10;
}

div.float-scroll-to-top > a,
div.float-scroll-to-top > a:visited {
	text-decoration: none;
	background-color: rgba(var(--background-rgb), 0.5);
	border: 1px solid rgba(var(--accent-rgb), 0.5);
	color: rgba(var(--accent-rgb), 0.5);
	border-radius: 50%;
	padding: 0 .3em;
}

div.float-scroll-to-top > a:hover {
	background-color: var(--accent);
	border: 1px solid var(--background);
	color: var(--background);
}

input {
	border-radius: 5px;
	text-align: center;
	padding: .25em;
	border-width: 2px;
}

input[type="submit"],
button {
	color: var(--accent);
	background-color: var(--background-dim);
	border-color: var(--accent);
	padding: 0px 10px;
	cursor: pointer;
	border-radius: 5px;
	border-style: solid;
	border-width: 2px;
	font-size: 14pt;
	transition: .15s;
}

button {
	font-weight: bold;
}

input[type="submit"]:hover,
button:hover {
	color: var(--accent);
	background-color: rgba(var(--accent-rgb), 0.2);
	transition: .15s;
}

button:disabled, button:disabled:hover,
input[type="submit"]:disabled, input[type="submit"]:disabled:hover
{
	color: var(--text-dim);
	border-color: var(--secondary);
	background-color: rgba(var(--secondary-rgb), 0.2);
	background-image: repeating-linear-gradient(135deg, rgba(var(--secondary-rgb), 0.2), rgb(var(--secondary-rgb), 0.2) 10px, var(--background-dim) 10px, var(--background-dim) 25px);
	cursor: not-allowed;
}

input[type="submit"].inverted,
button.inverted {
	color: var(--background-dim);
	background-color: var(--accent);
	border-color: var(--accent);
}
input[type="submit"].inverted:hover,
button.inverted:hover {
	color: var(--background-dim);
	background-color: var(--accent-dim);
}

button.inverted:disabled {
	background-image: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.8), rgb(var(--accent-rgb), 0.8) 10px, var(--accent-dim) 10px, var(--accent-dim) 25px);
	border-color: rgba(var(--accent-rgb), 0.8);
	cursor: not-allowed;
}

input.round,
button.round {
	border-radius: 15px;
	font-size: 18pt;
	margin-left: 1em;
	margin-right: 1em;
}

input.big,
button.big {
	font-size: 18pt;
	border-radius: 10px;
	font-weight: bold;
	padding: .25em .75em;
	margin: .25em .5em;
}

button.hero {
	border-width: 3px;
	font-weight: bold;
	border-radius: 15px;
	margin: 1em;
	padding: .75em 1.5em;
}

p.warning {
	border: 1px dashed var(--accent);
	padding: 1em;
	width: 60%;
	margin: auto;
}

p.warning small {
	color: var(--accent);
}

.tabs-container {
	box-sizing: border-box;
}

.tabs-container>div.tabs {
	position: absolute;
	opacity: 0;
	transition: .3s;
	box-sizing: border-box;
	z-index: -1;
}

.tabs-container>div.tabs.active {
	opacity: 1;
	z-index: 1;
}

.moreinfo {
	border-bottom: 1px dashed var(--background-secondary);
}

div.auth-card{
	background-color: var(--background-dim);
	border-radius: 2em;
	border: 2px solid var(--background-secondary);
	padding: 2em;
	box-shadow: 40px 40px 60px #000;
}
@media screen and (max-width: 900px) {
	div.auth-card{
		padding: .5em;
	}
}
div.auth-form {
	display: grid;
	grid-template-columns: 2fr 3fr;
	grid-gap: .5em;
	margin: .5em;
}
div.auth-form label {
	text-align:right;
}

::placeholder {
	text-align: center;
}