* {
	--main-color: var(--gray-5);
	--main-color-light: var(--gray-6);
	--alt-color: var(--gray-1);
	--link-color: var(--red-2);
	--slightly-off: var(--gray-4);
	--middle-off: var(--gray-3);
	--alt-off: var(--white);
}

h1 {
	font-weight: 900;
	font-size: 2.5rem;
}

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

a:hover {
	text-decoration: underline;
}

body {
	margin: 0;
	/* background: var(--main-color); */
	color: var(--alt-color);
}

div#login {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}


input,select {
	padding: 15px;
	border-radius: 5px;
	border: none;
	background: var(--main-color-light);
	color: var(--alt-color);
}

input[readonly] { background: var(--alt-off); border: 1px solid var(--red-5); }
input:focus,select:focus { outline: 1px solid var(--red-3); }
input:hover,select:hover { outline: 1px solid var(--gray-3) }

.logo {
	display: inline;
	position: relative;
	top: 0;
	vertical-align: middle;
}

.links a {
	padding: 16px;
}

.links a:hover {
	background: var(--main-color);
	color: var(--alt-color);
}

main {
	width: 100%;
	display: block;
	position: relative;
	top: 30px;
	padding: 10px;
	box-sizing: border-box;
}

.bg-warn {
	background: var(--red-5) !important;
	color: var(--red-2) !important;
}

@media (prefers-color-scheme: dark) {
	* {
		--main-color: var(--gray-0);
		--main-color-light: var(--gray-0);
		--alt-color: var(--gray-3);
		--link-color: var(--red-3);
		--slightly-off: var(--gray-1);
		--alt-off: var(--gray-1);
		--strong: var(--white);
		--middle-off: var(--gray-2);
	}
	.bg-warn {
		background: var(--red-2) !important;
		color: var(--red-4) !important;
	}
	
}

.tr-hover a.tr-hover {
	display: none;
}
.tr-hover:hover a.tr-hover {
	display: inline;
}

.hoverunfade {
	opacity: 0.8;
	filter: saturate(0.8);
	transition: all 0.6s ease;
}
.hoverunfade:hover {
	opacity: 1;
	filter: saturate(1.1);
}