html {
	scroll-behavior: smooth;
}


body{
	margin: 0;
	background-color: #eeeeee;
	font-family: Tahoma;
}

nav ul {
	list-style: none;
	display: flex;
	background-color:#22c1c3;
	justify-content: center;
}
nav a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 20px;
}

nav a:hover {
	background-color: #fff;
	color: #22c1c3;
}
header, footer {
	background: rgb(34,193,195);
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

/*	background: rgb(106,102,177);
background: radial-gradient(circle, rgba(106,102,177,1) 0%, rgba(4,4,231,1) 0%, rgba(2,2,5,1) 99%);*/

	/*background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(38,12,210,1) 47%);*/
	padding: 60px 0;
		/*ou padding-top:60px;et padding-botton:60px*/
		text-align: center;
		color: #ffffff;
}
h1, h2 ,h3 {
	text-transform: uppercase;
	font-family: «Commissioner», sans-serif;
}
 h2 {
	color: #22c1c3;
}

h3 {
	color: #22c1c3;
}
p {
    color: black;
	font-size:18px;
}

strong {
	color: #c82323;
}
footer, span {
	color: #ffffff;
}

#formations, #experience-Professionnelles, #bio {
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin: 20px auto;
	box-shadow: 5px 5px 5px #bbbbbb;/* pour mettre de l'ombre sur la section,+(plus) en ajoute la valeur du dernier px + (plus) c'est flou, si on veut mettre ombre en haut, on utilise la négation sur le deuxième px*/
}

#bio {
	display: flex;/* pour mettre <p> à droite*/
	align-items: center;
}
#bio p {
	text-align: justify;
}
#bio img {
	border-radius: 80%;
		box-shadow: 8px 8px 8px #bbbbbb;
		width: 150px;
		border: 8px solid #bbbbbb;
		margin-right: 20px;
}
.formation {
	margin-left: 20px;
}
.bar {
	width: 200px;
	height: 15px;
	background-color: #dddddd;
	border-radius: 10px;
}
.barRemplissage {
	width: 70%;
	height: 100%;
	background-color:#c82323;
	border-radius: 10px;
}
#conteneur {
	display: flex;
	justify-content: space-around;
}
.Certification {
	display: flex;
}
#competences {
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin: 20px auto;
	box-shadow: 5px 5px 5px #bbbbbb;
}
#certification img {
	border-radius: 80%;
		box-shadow: 8px 8px 8px #bbbbbb;
		width: 150px;
		border: 8px solid #bbbbbb;
		margin-right: 20px;
		background-color: #ffffff;
		padding: 20px;
		margin-bottom: 20px;
		margin: 20px auto;
		box-shadow: 2px 2px 2px #bbbbbb;
		display: flex;
		align-items: center;
}
h2 {
	text-align: center;
}
#Centre-interet {
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin: 20px auto;
	box-shadow: 5px 5px 5px #bbbbbb;
}






/*
#competences {
	background-color: #dddddd;
	padding: 20px;
	border: 10px dashed black;
}
*/