body{
	display:grid;
	margin:auto;
	grid-template-columns:[col1]1fr [col2]2fr [col3]1fr;
	grid-template-rows: [header]150px [main]auto [menuAsterix]auto [menuArcNarratifDuJurassique]auto [menuCinema]auto [menuWikipedia]auto [menuCoursDeMathematiques]auto [menuFormulaires]auto [footer]100px;
	grid-template-areas:
		"header header header"
		"asideGauche main asideDroit"
		"asideGauche menuAsterix asideDroit"
		"asideGauche menuArcNarratifDuJurassique asideDroit"
		"asideGauche menuCinema asideDroit"
		"asideGauche menuWikipedia asideDroit"
		"asideGauche menuCoursDeMathematiques asideDroit"
		"asideGauche menuFormulaires asideDroit"
		"footer footer footer";
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color:#333333;
}
/* -- MISE EN PAGE DU HEADER */
header {
	display: grid;
	grid-area: header;
	align-content: center;
	border-bottom: 2.5px solid deepskyblue;
	font-size: xx-large;
	font-weight: bolder;
}
header> img{
	display: grid;
	justify-self: center;
}
main {
	display: grid;
	grid-area: main;
	align-content: start;
	border-left: 2.5px solid orangered;
	border-right: 2.5px solid gold;
	justify-content: center;
}

aside.menu{
	border-left: 2.5px solid orangered;
	border-right: 2.5px solid gold;
	padding-left: 1rem;
	padding-right: 1rem;
}
aside.menu:last-of-type{
	padding-bottom: 1rem;
}
article {
	display: grid;
	grid-area: main;
	font-size: 0.9rem;
	width:400px;
	text-align: justify;
	align-content: start;
	justify-content: center;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
#menuAsterix{
	display: grid;
	grid-area: menuAsterix;
}
#menuArcNarratifDuJurassique{
	display: grid;
	grid-area: menuArcNarratifDuJurassique;
}
#menuCinema{
	display: grid;
	grid-area: menuCinema;
}
#menuWikipedia{
	display:grid;
	grid-area: menuWikipedia;
}
#menuCoursDeMathematiques{
	display: grid;
	grid-area: menuCoursDeMathematiques;
}
#menuFormulaires{
	display: grid;
	grid-area: menuFormulaires;
}
footer {
	display: grid;
	grid-area: footer;
	background-color: deepskyblue;
	border-top: 2.5px solid #333333;
}

/* -- MISE EN PAGE DU MAIN  */
h1{
	text-align: center;
	font-size: 2rem;
	width: 100%;
	height: 100%;
}
canvas{
	margin:auto;
}

#asideGauche{
	display: grid;
	grid-area: asideGauche;
}
#asideDroit{
	display: grid;
	grid-area: asideDroit;
}

aside.menu > p.titreDuNav {
	text-align: center;
	align-content: center;
	color:#333333;
	background-color: gold;
	border: 1px solid orangered;
	height: 3rem;
	margin-bottom: 0;
}
aside.menu > nav{
	display: grid;
	justify-content: center;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
}
aside.menu > nav > ul{
	padding-left: 0;
	margin-top:0;
	margin-bottom: 0;;
}
aside.menu > nav > ul > li{
	list-style: none;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
aside.menu > nav > ul > li > a{
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
	text-decoration: none;
	color:#333333;
}
aside.menu > nav > ul > li > a:hover{
	text-decoration: underline;
}


@media(max-width:500px){
	body{
		display:grid;
		grid-template-columns:[col1]auto;
		grid-template-rows: [header]auto [main]auto [menuAsterix]auto [menuArcNarratifDuJurassique]auto [menuCinema]auto [menuWikipedia]auto [menuCoursDeMathematiques]auto [menuFormulaires]auto [footer]auto;
		grid-template-areas:
		"header"
		"main"
		"menuAsterix"
		"menuArcNarratifDuJurassique"
		"menuCinema"
		"menuWikipedia"
		"menuCoursDeMathematiques"
		"menuFormulaires"
		"footer";
		font-size: large;
	}
main,
aside.menu{
	border:0px;
}
header> img{
	width: 300px;
}
}