html {
	scroll-behavior: smooth;
}

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

.rouge {
	color: red;
}

nav ul {
	list-style: none;
	display: flex;
	background-color: #0182ab;
	padding: 20px;
	justify-content: center;
}

nav a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 20px;
}
nav a:hover {
	background-color: #fff;
	color: #0182ab;
}

header, footer {
	background: rgb(0,212,255);
	background: linear-gradient(180deg, rgba(0,212,255,1) 0%, rgba(2,0,36,1) 100%);
	padding: 60px 0;
	text-align: center;
	color: #ffffff;
}



h1, h2, h3 {
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
}


#formations, #experiencesPro, #bio, #competences {
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin: 20px auto;
	box-shadow: 0px 0px 13px #bbbbbb;
}

#bio {
	display: flex;
	align-items: center;
}

#bio p {
	text-align: justify;
}
/* Ceci est le css de la bio */
#bio img {
	width: 150px;
	/* height: 150px; */
	border-radius: 100%;
	border: 8px solid #bbbbbb;
  box-shadow: 4px 5px 5px #888;
	margin-right: 20px;
}

.formation {
	margin-left: 20px;
}

.barre {
	width: 200px;
	height: 15px;
	background-color: #dddddd;
	border-radius: 10px;
}

.barreRemplissage {
	width: 80%;
	height: 100%;
	background-color: #0182ab;
	border-radius: 10px;
}

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

}
*/