@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300;400&display=swap');

:root {
	--color-nav-bg: #5d41ac;
	--color-nav-text: #FFFFFF;
	/*
	--color-nav-bg: #162344;
	--color-nav-text: #c3d352; 
	*/
	--color-bg: #FFFFFF;
	--color-article-bg: #FFFFF;
	--color-article-text: #162344;
	--color1: #5d41ac;
	--color1b: #FFFFFF;
	--color2: #c3d352;
	--color3: #00B0B0;
	--max-width: 3200px;
	--nav-height: 50px;
}

* {
	box-sizing:   border-box;
}

nav {
	justify-content: start;
}

body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--color-bg);
	margin: auto;
	color: var(--color-article-text);
}

h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;   
	margin-bottom: 0px;
	margin-top: 0px;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;   
}

nav {
	background-color: var(--color-nav-bg);
	color: var(--color-nav-text);
}

header {
	padding-top: var(--nav-height);
	display: grid;  
	background-color: var(--color-article-text);
} 

header img {
	width: 100%;
}

header video {
	width: 100%;
}

header iframe {
	width: 100%;
	height: 56vw;
}

header .slideShow {
	grid-row: 1;
	height: 85vh;
}

header .slideShow img {
	object-fit:  cover;
}

footer {
	padding-top: 64px;
	background-color: var(--color-article-bg);
	color: var(--color-article-text);
	text-align: center;
	overflow: hidden;
	font-size: 12px;
}

main {
	max-width: var(--max-width);
	margin: auto;
}

article {
	padding-top: var(--nav-height);
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 64px;
	background-color: var(--color-article-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/*! min-height: 100vh; */
	align-content: center;
	justify-content: start;
}

article h1 {
	color: var(--color2);
	text-align: center;
}

article h2 {
	color: var(--color3);
	text-align: center;
}

article ul {
	padding: 0;
	margin: auto;
	list-style-type: none;
}

article > img {
	display: block;
	margin: auto;
	max-width: 100%;
	object-fit: scale-down;
}

article > form {
	margin: 16px auto 16px auto;
}

article > form input {
	font-size: 24px;
	text-align: center;
	/*! color: var(--color1); */
	border-radius: 8px;
	border: solid 1.5px black;
	box-shadow: none;
	box-sizing: ;
	padding: 8px;
}

article > form input:focus {
  outline: none; /* Removes the default focus outline */
}

article > table {
	margin: 16px auto;
	text-align: left;
	border-spacing: 0px;
	border: 1px solid var(--color1);
	border-radius: 12px;
    overflow: hidden;
}

article table caption {
	border: none;
	font-size: 18px;
	white-space:  nowrap;
	margin-bottom: 8px;
	color: var(--color3);
	padding: 0;
}

article table .hidden {
    display: none;
}

article table td, article table th {
	padding: 4px 8px;
}

article table th {
	font-size: 18px;
	background-color: var(--color1);
	color: var(--color1b);
	vertical-align: bottom;
}

article table tr:nth-child(even) {
  background-color: var(--color2);
}

article textarea {
	width: 100%;
	height: 50vh;
}

/* 
 * Results Search Table
 */
#resultsSearchTable tr *:nth-child(3) {
	text-align: center;
}

#resultsSearchTable tr *:nth-child(2),
#resultsSearchTable tr *:nth-child(5),
#resultsSearchTable tr *:nth-child(6),
#resultsSearchTable tr *:nth-child(7),
#resultsSearchTable tr *:nth-child(8),
#resultsSearchTable tr *:nth-child(9) {
	text-align: right;
}

/*
 * Persons Table
 */


@media only screen and (max-width : 1000px) {
	#personsTable {
		font-size: 10px;
	}
	
	#personsTable th {
		font-size: 12px;
	}
	#personsTable tr > *:nth-child(6),
	#personsTable tr > *:nth-child(7),
	#personsTable tr > *:nth-child(8),
	#personsTable tr > *:nth-child(9),
	#personsTable tr > *:nth-child(10)
	{
		display: none;
	}
}


/*
 * Person Info Table
 */
#personInfoTable tbody th {
	text-align: right;
}

/*
 * Login Page
 */

#loginPage article {
	background-color: var(--color1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

#loginPage h1 {
	font-size: 48px;
	text-shadow: 
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

#loginPage form {
  display: grid;
  grid-template-columns: auto auto; /* Two columns of equal size */
	padding: 10px;
	border-radius: 8px;
  gap: 2px; /* Space between grid items */
}

 
#loginPage form label, 
#loginPage form input[type='text'], 
#loginPage form input[type='password'], 
#loginPage form .error {
	font-size: 24px;
  grid-column: span 2; /* Make these items span across two columns */
	/*! margin-top: 4px; */
}

#loginPage form label {
	margin-top: 8px;
	margin-left: 8px;
	color: var(--color1b);
}

#loginPage form .error {
	text-align: center;
	background-color: red;
	padding: 8px;
	border-radius: 8px;
}

#loginPage form .error:empty {
	display: none;
}

#loginPage form input[type='submit'] {
  grid-column: 2; /* Position the submit button in the second column */
	padding: 8px;
	font-size: 24px;
	margin-top:8px;
}


/*
 * Home Page
 */

#aboutPage article h1 {
	margin-bottom: 12px;
}
#aboutPage article p {
	margin: auto;
	max-width: 1200px;
}

#aboutPage article table th {
	text-align: right;

}

#aboutPage article ul li {
	list-style: circle;
}

#aboutPage article a {
	color: var(--color4);
	text-decoration: none;
}

media only screen and (max-width : 550px) {
	#aboutPage header .slideShow {
		top: -40px;
	}
}

/*
 * SQL Query Page
 */
#sqlQueryPage form {
	width: 100%;
	max-width: 1024px;
	display: flex;
	flex-direction: column;
}

.statistics {
	display: grid;
	grid-template-columns: 1fr 2fr 4fr 1fr;
	grid-gap: 16px;
	max-width: 1024px;
	margin: auto;
}

.statistics h1 {
	grid-column: 1/-1;
	margin: 32px auto;
}

.statistics h2 {
	grid-column: 2;
	align-self: end;
	margin: 0;
}

.statistics .graphLegend {
	grid-column: 2;
	align-self: start;
	list-style: none;

	border: solid 1px black;
	border-radius: 8px;
	padding: 4px;
	margin: 0 auto;
}

.statistics svg {
	width: 100%;
	grid-column: 3;
	grid-row: span 2;
	border: 1px solid black;
	border-radius: 8px;
}


/* general responsive adjustments */
@media only screen and (max-width : 1200px) {
	nav a {
		font-size: 14px;
	}    
}


@media only screen and (max-width : 700px) {
	h1 {
		text-align: center;
		font-size: 26px;
	}

	h2 {
		text-align: center;
		font-size: 20px;
	}

	article p {
		margin: 0;
		/*! margin-top: 64px; */
	}

}

@media only screen and (max-width : 550px) {
	h1 {
		text-align: center;
		font-size: 26px;
	}

	h2 {
		text-align: center;
		font-size: 16px;
	}

}