@font-face {
 font-family: "Quicksilver";
 src: url("../fonts/Quicksilver.ttf");
}

*{
	font-family: Arial;
}

h1{
	font-family: Quicksilver;
	font-size: 60px;
	color: blue;
}

h2{
	font-weight: bold;
	font-family: Arial;
	font-size: 50px;
}

a:hover{
	color: red;
	font-weight: bold;
}

div.img-container{
	text-align: center;
}

img{
	width: 50%;
}

/* Centrer les liens du footer */
footer{
	text-align: center;
}

aside#competences{
	border: solid 2px grey;
	border-radius: 15px;
	padding: 15px 10px 15px 10px;
	margin: 30px 0 30px 0;
}

section#experiences, section#formation{
	border-bottom: solid 1px black;
	padding-bottom: 15px;
}

body{
	margin: 0; /* Sur le body : supprimer la marge externe */
}

header, section{
	padding: 30px; /* Mettre une marge interne de 30px */
}

header{
	background-color: #1c2840; /* Mettre une couleur de fond #1c2840 */
}

h1, h2{
	color: #fff; /* Mettre le h1 et h2 en blanc */
}

a{
	text-decoration: none; /* Supprimer le soulignement */
	font-weight: bold; /* Mettre le texte en gras */
	background-color: #5E8E8E; /* Mettre une couleur de fond #5E8E8E */
	color: #fff; /* Mettre une couleur de texte #FFF */
	padding: 10px; /* Mettre une marge interne de 10px */
	margin-right: 15px; /* Mettre une marge externe à droite de 15px */
	border-radius: 15px; /* Mettre un arrondi de 15px */
	text-transform: uppercase; /* BONUS : Mettre en majscules ! */
	transition: all 1s ease-out;
}
a:hover{
	background-color: #11181E; /* Au passage de la souris, mettre une couleur de fond #11181E */
	color: red; /*  et couleur rouge */
}
footer{
	background-color: #11181E; /* Mettre le fond du footer en #11181E */
	padding: 30px; /* Mettre une marge interne de 30px */
	margin-top: 30px; /* et une marge externe en haut de 45px */
}
/* Positionner la photo et le bloc compétences en haut à droite. */
aside#competences, img{
	float: right;
	width: 30%;
	margin: 15px;
}

/* version simple */
.container{
	width: 1000px; /* taille fixe */
	margin:0 auto; /* centré en largeur */
}


/* version optimisée */
.container{
	width: 100%; /* prend toute la largeur */
	max-width: 1000px; /* largeur max */
	margin:0 auto; /* centré en largeur */
}


/* seulement les liens du footer */
footer a{
	background-color: red;
}

ul{
	list-style: none; /* on enlève les puces */
}
ul li{
	background-image: url('../images/fleche.png'); /* on met l'image de fond */
	background-repeat: no-repeat; /* pas de répétition */
	background-position: top left; /* position de l'image */
	background-size: 24px; /* taille de l'image */
	padding-left: 30px; /* décalage du texte à droite */
	line-height: 24px; /* on augmente la hauteur de ligne */
}