html, body {
	height: 100%;
	width: 100%;
	font-family: Arial, sans-serif;
	font-size:12pt;
	hyphens: auto;
	margin: 0;
}

#wrapper {
	background-color: yellow;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 auto;
	width: 100%;
}

h1, h2, h3, h4 {
	font-family: Arial, sans-serif;
	font-weight: bolder;
}

header {
	color: white;
	background-color: navy;
	width: 100%;
	height: auto;
	//opacity: 0.8;
}

header h1{
	text-align: left;
	text-indent: 1em;
	padding-top: 20px;
	padding-bottom: 20px;
}

header nav {
	background-color: red;
}

main {
	background-color: white;
	display: flex;
	flex-direction: row;
	flex:1;
}

main nav {
	color: navy;
	background-color: white;
	flex:20;
}

main nav a{
	text-decoration: none;
	display: block;
}

main nav ul{
	list-style-type:none;
	margin: 0 auto;
	border-right: 1px solid navy;
}

main nav li{
	margin: 20px 9px 5px 20px;
	padding-left: 2px;
}

main nav a:link{color:navy;}
main nav a:visited{color:navy;}
main nav a:focus{color:navy;}
main nav a:hover{color:blue; text-decoration: underline;}
main nav a:active{color:navy;}

main nav img{
	margin: 40px 20px 20px 60px;
}

section {
	background-color: white;
	flex: 70;
	margin-top: 10px;
	padding: 4px;
	margin-left: 30px;
	margin-right: 30px;
}

section h2{
	text-align: center;
	font-size:20pt;
	letter-spacing: 0.2em;
}

section p {
	//margin: 2em;
	text-indent: -1em;
	margin-left: 20px;
}

#philosophie{
	text-align: center;
}

section h3 {
	//margin: 2em auto;
	//text-indent: 1.5em;
}

aside {
	background-color: gray;
	flex: 0;
}
footer {
	color: white;
	background-color: navy;
}

footer a:link{color:white;}
footer a:visited{color:white;}
footer a:focus{color:white;}
footer a:hover{color:white; text-decoration: underline;}
footer a:active{color:white;}