p:hover{
font-size				:	21px								;
} 

p {
font-size				:	20px								;
} 

li {
font-size				: 	35px 								;
}

body {
background-color		: 	#F97E53 							;

}

section {
background-color		: 	#99DAFF 							;
}

h1:hover {
color					: 	white								;
font-size				: 	50px								;
text-shadow				: 	0 0 12px black						;
}

h1 {
  text-shadow			: 	0 0 12px white						;
  font-size				: 	50px								;
}

h2 {
  text-shadow			: 	0 0 5px white						;
  font-size				: 	40px								;
}


/*
La barre de navigation
*/

body {margin:0;font-family:Arial}

/*
couleur de la barre
*/
.topnav {
  overflow				: 	hidden								;
  background-color		: 	#333								;	
}

/*
le premier block
*/
.topnav a {
  float					: 	left								;
  display				: 	block								;
  color					: 	#f2f2f2								;
  text-align			: 	center								;
  padding				: 	14px 16px							;
  text-decoration		: 	none								;
  font-size				: 	17px								;
  
}
/*
ce qui se passe l'ors qu'on passe au dessus du premier block
*/
.active {
  background-color		: 	#f7230c								;
  color					: 	white								;
}

/*
aligner le menu déroulant
*/
.dropdown {
  float					: 	left								;
  overflow				: 	hidden								;
}

/*
le menu déroulant
*/
.dropdown .dropbtn {
  font-size				: 	17px								;    
  border				: 	none								;
  outline				: 	none								;
  color					: 	white								;
  padding				: 	14px 16px							;
  background-color		: 	inherit								;
  font-family			: 	inherit								;
  margin				: 	0									;
}

/*
le menu déroulant
*/
.dropdown-content {
  display				: 	none								;
  position				: 	absolute							;
  background-color		: 	#f9f9f9								;
  min-width				: 	160px								;
  box-shadow: 				0px 8px 16px 0px rgba(0,0,0,0.2)	;
  z-index: 					1									;
}

/*
met le menu déroulant verticalement
*/
.dropdown-content a {
  float					: 	none								;
  color					: 	black								;
  padding				: 	12px 16px							;
  text-decoration		: 	none								;
  display				: 	block								;
  text-align			: 	left								;
}

/*
Laisse la case menu déroulant sélectionné
*/
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color		: 	#555								;
  color					: 	white								;
}

/*
couleur case survolée menu déroulant
*/
.dropdown-content a:hover {
  background-color		: 	#ddd								;	
  color					: 	black								;
}	

/*
fais apparaître le menu déroulant
*/
.dropdown:hover .dropdown-content {
  display				: 	block								;
}

/*
adapter le menu à l'écran ?
*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display				: 	none								;
  }
  .topnav a.icon {
    float				: 	right								;
    display				:	block								;
  }
}

/*
adapter le menu à l'écran ?
*/
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position			: 	absolute							;
    right				: 	0									;
    top					: 	0									;
  }		
  .topnav.responsive a {
    float				: 	none								;		/* Je ne sais pas*/		
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}			/* Je ne sais pas*/	
  .topnav.responsive .dropdown .dropbtn {
    display				:	block								;
    width				: 	100%								;
    text-align			: 	left								;
  }
}

/*
Le tableau (fais moi même)
*/
table {
  font-family			: 	arial, sans-serif					;
  border-collapse		: 	collapse							;
  width					: 	100%								;
}

td, th {
  font-size				: 	20px								;
  font-weight			:	bold								;
  border				: 	2px solid #dddddd					;
  text-align			: 	center								;
}