/* ------ conteneur horizontal ---- */
.mycontainer {
	display: flex;
}
.mycontainer > div {
	width: 60%;
	margin: auto; 
}

h2 {
	text-align: center;
	margin: 8px 5px;
}

h3 {
	text-align: center;	
   color: #800000; 
	margin: 8px 5px;
}	

table {
	border-collapse: collapse;
	width: 100%;		
	margin: auto;
}

tr, td {	
  	padding: 5px 0px;
	margin: 0;	
	text-align: left;	
	border-bottom: 1px solid #c0c0c0; 
	border-top: 1px solid #c0c0c0; 
}

th {	
  	width: 125px;
	padding: 5px 3px;	
	text-align: left;
   color: blue;	
	border-bottom: 1px solid #c0c0c0;
	border-top: 1px solid #c0c0c0;  	
}

tr:hover {
	background-color: #D6EEEE;
}

a  { 
	color: blue;
	text-decoration: none; 
}
a:hover { 
   color: #800000;  
	background-color: #D6EEEE;
}
a:visited {
   text-decoration: none;
}
a:active {
   text-decoration: none;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ----- Bouttons ----*/
.button {
	background-color: #e0e0e0; 
	border: 2px solid #e0e0e0;
	color: black;
	padding: 2px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
}
.button:hover {
	border: 2px solid #800000;
	background-color: #D6EEEE;
	color: #800000;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
	.mycontainer > div {
		width: 90%;
		margin: auto;  
	}
}
@media screen and (max-width: 600px) {
	.mycontainer > div {
		width: 100%;
		margin: 0;  
	}
}