@charset "UTF-8";
:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: black;
  --light-subtitle: #ea1c2d;
  --light-code: tomato;
  --light-link: blue;
  --light-link-hover: darkblue;
  --light-grid: white;
  --light-grid-shadow: black;
  --light-row: blue;

  --dark-bg: black;
  --dark-color: ghostwhite;
  --dark-subtitle: #ea1c2d;
  --dark-link: blue;
  --dark-link-hover: lightblue;
  --dark-grid: black;
  --dark-grid-shadow: white;
  --dark-row: DarkSlateBlue;
}

body {
	font-family: "lexend", sans-serif;
	font-size: min(25vmin, 20px);
	color: light-dark(var(--light-code), var(--dark-code));
	padding-bottom: 1vh;
}

input {
	width: 90vw;
	height: 5vh;
	font-size: 5vh;
}

table {
	width: 95%;
	text-align: right;
	tr:nth-child(even) {
  		background-color: light-dark(var(--light-row), var(--dark-row));
	}
}

tr {
	text-align: center;
	
}

#columnTitle {
	background-color: light-dark(var(--light-row), var(--dark-row));
}

.subtitle {
	font-size: min(20vmin, 25px);
	color: light-dark(var(--light-subtitle), var(--dark-subtitle));
	text-align: center;
}

header {
	font-size: 1vh;
	top: 0;
	display: flex;
	flex-direction: row;         /* This is default so you can omit it but it's good to be explicit  */
	justify-content: flex-start; /* This will snap all content of header to the left due to 'flex-direction: row'  */
	background-color: light-dark(var(--light-bg), var(--dark-bg));
	border-bottom: solid;
	padding: 0.5rem 1rem;        /* Padding top/bottom then left/right. 1rem = default pixel size of html font (14px or 16px etc) so 0.5rem = 7px or 8px  */
	z-index: 200;
}

header > img {
			 height: 4vw;   /* Set the height of your image  */
			 width: auto;    /* Keep the height/width ratio of source image  */
		 }
		 nav {
			  display: flex;
			  flex-direction: row;
			  flex: 1;                  /* Use the rest of the available space of the <header> */
			  justify-content: center;  /* Keep the links in the center of this element  */
			  align-items: center;      /* Puts the links vertically in the center of the <nav> */
			  max-height: min-content;
		 }

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;         /* This is default so you can omit it but it's good to be explicit  */
    justify-content: flex-start; /* This will snap all content of header to the left due to 'flex-direction: row'  */
    background-color: light-dark(var(--light-bg), var(--dark-bg));
    padding: 0.1rem 1rem;        /* Padding top/bottom then left/right. 1rem = default pixel size of html font (14px or 16px etc) so 0.5rem = 7px or 8px  */
    z-index: 100;
}