:root {
	color-scheme: light dark;
	--light-bg: #ffffff;
	--light-fg: #000000;
	--dark-bg: #001321;
	--dark-fg: #ffef99;
	--light-err: #BB3F3E;
	--dark-err: #FF4549;
}

body {
	color: light-dark(var(--light-fg), var(--dark-fg));
	background-color: light-dark(var(--light-bg), var(--dark-bg));
}

h1,h2,h3 {
	margin-bottom: 0;
}

main {
	max-width: 600px;
	min-width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5rem;
}

.centering {
	justify-content: center;
	display: grid;
	min-width: fit-content;
	overflow-x: scroll;
}

.err{
	color: light-dark(var(--light-err), var(--dark-err));
}

table {
  table-layout: fixed;
	margin: 0.5rem 1rem;
	width: 90%;
	border-collapse: collapse;
}

th {
	padding: 0.5rem;
	text-align: left;
}

td {
	padding: 0.2rem;
}

tbody tr:nth-child(odd){
	background-color: light-dark(#eeeeee, #1a2f59);
}

.skiplink {
	margin-left: 1rem;
	a:link {
		color: light-dark(blue, cyan);
	};
	a:visited{
		color: light-dark(purple, cornflowerblue);
	};
	a:hover {
		color: light-dark(indigo, antiquewhite);
	}
}

.guidance {
	max-width: 100vw;
	ul {
		padding-left: 1rem;
	}
}

.form {
	display: block;
	width: max-content;
	padding: 0.2rem;
	margin-top: 1.5rem;
	border: 1px solid light-dark(var(--light-fg), var(--dark-fg));
	border-radius: 1rem;
}

form div {
	padding: 0.5rem;
	width: max-content;
}

.tablescroll {
	max-height: 80vh;
	overflow-y: scroll;
}