/* pour en savoir plus les feuilles de style :
 * http://css.mammouthland.net 
 * 
 * changer les codes des couleurs : 
 * https://htmlcolorcodes.com/fr/
 * 
 * changer les % de font-size
 * changer les text-align (left, center, right)
 * ATTENTION : ne pas oublier les point-virgules en fin de ligne.
 * 
 * changer la taille de la fenêtre du navigateur
 * (passer de l'ordinateur au smartphone)
 * repérer dans ce fichier les commandes permettant
 * de gérer les effets observés.
 */
body { /*le corps des pages du site */
 font-family:"trebuchet ms", helvetica, sans-serif;
 font-size:100%;
 background-color:#E6E6FA;
 width:90%;
 margin-left: auto;
 margin-right:auto; 
 }

code {
	font-size: 110%;
	background-color: #BBC7CC;
	color: #023F58
}

h1 {
 text-align:left;
 color : #3B2CF2;
 background-color : #f0da02;
 font-size:150%;
 margin-left : 0em;
 }

h2 {
 text-align:left;
 color : #3B2CF2;
 background-color : #E6E6FA;
 font-size:120%;
 margin-left : 0em;
 }

/* pour le pied de page */
#footer {
color: #3B2CF2;
background-color:#f0da02;
text-align:center;
clear:both;
}

/* attribut de "class" pour les mises en forme */
.bouton {
color: #E55611;
background-color: #E55611;
}

.bouton a:hover { /* quand la souris passe sur une classe "bouton" */
color: #000;
background-color: #DAF7A6;
}

.important {
color: #FBF2EF;
background-color:#8181F7;
}

.titre {
border: 0px;
border-radius: 0px 15px 0px 15px;
box-shadow: 8px 8px 12px #AAAAAA;
padding: .5em;
margin: 1em 0px;
background-color: #f0da02;
text-align: center;
font-weight: bold;
font-size: 120%;
}




/* -----------------------------------
 * modifs en fonction tailles d'écran 
 * ----------------------------------- */

/* max-width pour faibles résolutions */
@media screen and (max-width: 500px) {
	body {
		font-size: 85%;
		background-color:#FFFFFF;
		}

	img {
		width:70%;
		height:70%;
	}

	h1 {
		text-align: center;
	}

	.important {
	color: #FF0000;
	background-color:#FFFFFF;
	}
}