:root {
--cBackground: #191919;
--cMain: #76b8d2;
--cSecondary: #008bb4;
--cText: white;
--cError: red;
--cErrorBackground: var(--cBackground);
--cSuccess: green;
--cSuccessBackground: var(--cBackground);
--cTable1: #76b8d2;
--cTable2: #008bb4;
--cTable3: #555555;
--cTable4: var(--cBackground);
}

body {
color: var(--cText);
margin: 0;
background-color: var(--cBackground);
min-height: 100vh;
font-family: sans-serif;
}

h1, h2, h3 {
text-align: center;
}

.textBox {
background-color: var(--cSecondary);
margin: 0 auto;
margin-bottom: 10px;
width: 80%;
max-width: 800px;
padding: 1%;
border: solid var(--cMain);
border-radius: 20px;
}

.form {
background-color: var(--cSecondary);
margin: 0 auto;
margin-bottom: 10px;
width: 80%;
width: 250px;
padding: 1%;
border: solid var(--cMain);
border-radius: 20px;
text-align: center;
label {
	display: block;
	font-weight: bold;
	margin: 0 auto 10pt auto;
	background-color: var(--cSecondary);
	padding: 10px;
	width: 200px;
	border: solid var(--cMain);
	border-radius: 10px;
}
button {
	color: var(--cText);
	background-color: var(--cSecondary);
	border-radius: 20px;
	border: solid var(--cMain);
	padding: 7px;
}
input {
	width: 90%;
}
}

img {
display: block;
width: 100%;
height: auto;
}

.button {
display: block;
margin: 10px auto;
color: var(--cText);
background-color: var(--cSecondary);
border-radius: 20px;
border: solid var(--cMain);
padding: 7px;
}


.radio {
div {
	margin: 10px auto;
	display: inline;
	input {
		width: 10%;
	}
}
}

.navbar {
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 3px;
background-color: var(--Background);
a {
	color:var(--cText);
	text-decoration: none;
	:visited {
	color: var(--cText);
	text-decoration: none;
	}
}
}

.link {
border-radius: 3px;
font-size: 0.8em;
width: 90px;
height: 100%;
font-weight: bold;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--cText);
background-color: var(--cSecondary);
}

.logged_out {
border-radius: 3px;
font-size: 0.8em;
width: 200px;
height: 100%;
font-weight: bold;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
background-color: grey;
}


.logged_in {
border-radius: 3px;
font-size: 0.8em;
width: 200px;
height: 100%;
font-weight: bold;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
background-color: var(--cMain);
}



.flag {
width: 100px;
img {height: 100%;}
padding: 0;
border-radius: 0;
height: 100%;
}

.table {
font-size: 1em;
margin: 0 auto;
text-align: center;
background-color: var(--cTable3);
td, th {
	padding-left: 3pt;
	padding-right: 3pt;
	max-width: 160pt;
	height: 30pt;
	form button, details {
		color:var(--cText);
		text-decoration: none;
		:visited {
		color: var(--cText);
		text-decoration: none;
		}
		background-color: var(--cSecondary);
		border-radius: 10px;
		border: solid black 2px;
		padding: 4px;
	}
}
th {
	background-color: var(--cTable4);
}
}

.error {
color: var(--cError) !important;
background-color: var(--cErrorBackground) !important;
border-radius: 20px !important;
border: solid var(--cError) !important;
padding: 7px !important;
margin: 10px auto !important;
max-width: 800px !important;
}

.yellow {
color: yellow;
background-color: var(--cErrorBackground);
border-radius: 20px;
border: solid yellow;
padding: 7px;
margin: 10px auto;
max-width: 800px;
}

.success {
color: var(--cSuccess) !important;
background-color: var(--cSuccessBackground) !important;
border-radius: 20px !important;
border: solid var(--cSuccess) !important;
padding: 7px !important;
margin: 10px auto !important;
max-width: 800px !important;
}

.tableColor1 {
background-color: var(--cTable1);
}

.tableColor2 {
background-color: var(--cTable2);
}

.horizontal {
display: flex;
flex-direction: row;
justify-content: center;
gap: 30px;
}