:root {
  /* Dark theme colors */
  --dark_menu_background: #202124;
  --dark_menu_text: #999999;
  --dark_menu_text_hover: #ffffff;
  --dark_global_background: #202124;
  --dark_global_text: #999999;
  --dark_global_text_hover: #ffffff;
  --dark_title_text: #ffffff;
  --dark_footer_background : #171717;
  
  /* Light theme colors */
  --light_menu_background: #323233;
  --light_menu_text: #d6d6d6;
  --light_menu_text_hover: #ffffff;
  --light_global_background: #ffffff;
  --light_global_text: #1d1d1f;
  --light_global_text_hover: #6e6e73;
  --light_title_text: #1d1d1f;
  --light_footer_background : #f5f5f7;
}

  /* Global theme styles go here */

html, body {
  height: 100%;
  margin: 0;
  font-family: 'PT Sans', Verdana, sans-serif; 
 }
h3 {
 font-family: 'PT Sans', 'Trebuchet Bold', sans-serif; 
 font-size: 120%;
 padding-left: 5px;
 margin-bottom: 5px;
 }

p {
 text-align: justify;
 text-justify: inter-word;
 }
 
a:link {
 text-decoration: none;
 }

a:hover {
 text-decoration: none;
}

table {
 width:80%;
 height:100%;
 /*font-size: small;*/
}
table, th, td {
 border: none;
 text-transform: uppercase;
 margin-left:auto;
 margin-right:auto;
}
td {
}
nav{
 text-align: center;
 height:44px;
}
img{
 vertical-align: middle;
}
.menu a {
 text-decoration: none;
 }
.menu a:hover {
 text-decoration: none;
}
.main {
 margin-top: 4%;
 margin-left: 4%;
 margin-right: 4%;
 margin-bottom: 2%;
 /*font-size: small;*/
}
.wrapper {
 min-height: 100%;
 /* Equal to height of footer */
 /* But also accounting for potential margin-bottom of last child */
 margin-bottom: -50px;
}
.horodatage {
 font-size: small;
 color: transparent;
}
footer {
 line-height: 50px;
}
.footer,
.push {
 text-align: center;
 font-family: 'PT Sans', Verdana, sans-serif; 
 font-size: small; 
 min-height: 50px;
}
.footer a:link, .footer a:visited, .footer a:focus {
 text-align: center;
 font-family: 'PT Sans', Verdana, sans-serif; 
 font-size: small; 
 min-height: 50px;
}
.footer	a:hover {
 text-decoration: underline;
}

@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
  
html, body {
	  background-color: var(--light_global_background);
	  color: var(--light_global_text);
	 }
	h3 {
	 color: var(--light_title_text);
	 }

	p,ul,li,td {
	 color: var(--light_global_text);
	 }

	a:link {
	 color: var(--light_global_text);
	 }
	a:visited {
	 color: var(--light_global_text);
	 }
	a:hover {
	 color: var(--light_global_text_hover);
	}
	a:active, a:focus {
	 color: var(--light_global_text);
	}

	nav{
	 background-color: var(--light_menu_background);
	}

	.menu a {
	 color: var(--light_menu_text);
	 }
	.menu a:hover {
	 color: var(--light_menu_text_hover);
	}

	footer {
	 background-color: var(--light_footer_background);
	}
	.footer,
	.push {
	 color: var(--light_global_text);
	}
	.footer a:link, .footer a:visited, .footer a:focus {
	 color: var(--light_global_text);
	}
	.footer	a:hover {
	 color: var(--light_global_text_hover);
	}

}

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */

	html, body {
	  background-color: var(--dark_global_background);
	  color: var(--dark_global_text);
	 }
	h3 {
	 color: var(--dark_title_text);
	 }

	p,ul,li,td {
	 color: var(--dark_global_text);
	 }

	a:link {
	 color: var(--dark_global_text);
	 }
	a:visited {
	 color: var(--dark_global_text);
	 }
	a:hover {
	 color: var(--dark_global_text_hover);
	}
	a:active, a:focus {
	 color: var(--dark_global_text);
	}

	nav{
	 background-color: var(--dark_menu_background);
	}

	.menu a {
	 color: var(--dark_menu_text);
	 }
	.menu a:hover {
	 color: var(--dark_menu_text_hover);
	}

	footer {
	 background-color: var(--dark_footer_background);
	}
	.footer,
	.push {
	 color: var(--dark_global_text);
	}
	.footer a:link, .footer a:visited, .footer a:focus {
	 color: var(--dark_global_text);
	}
	.footer	a:hover {
	 color: var(--dark_global_text_hover);
	}
}