html{
	scroll-behavior: smooth;
}



body{

	margin:0;
	background-color: #eeeeee;
	font-family: tahoma;
	text-align: center;
}


body{
font-family: calibri;
margin: 0px;
padding: 0px;
}
nav{
width: 100%
backround-color: #424558;
}
nav ul {
margin: 0px;
padding: 0px;
}
nav ul:after {
content:"";
display:block;
clear: both;

}
nav ul li{
float: left;
position: relative;
}

nav ul li a {
padding: 20px 30px;
color: #fff;
}
nav li {
list-style-type: none;
}
nav a {
display: inline-block;
text-decoration: none;
}




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-color: #690b23;
	padding:60px0;
	margin-top: 60px;
	color:#ffffff;
	text-align: center;
}
	h2 {
		text-transform: uppercase;
		font-family: 'Dancing Script', cursive;
}
    h1 {
	font-family: arial;
}
{
	color: black;
	}
	p{
	color: black;
	font-size:12px;
	}
	strong{
	color:blue;
	}
	span{
	color:green;
		}
		span {
			color:green;
		}
		
		#formation,#experiencesprofessionnelles,#bio,#competences, {
			background-color: #ffffff;
			padding:20px;
			margin-bottom: 20px;
			width: 80%;
			margin:20px auto;
			box-shadow: 0px 0px 13px #bbbbbb;
			}
		
		.formation, .experience, .competence {
         margin-left: 80px;
}

.competence {
	background: #314455;
	padding: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin: 20px auto;
	box-shadow: 2px 2px 8px #ffffff;
	border-radius: 15px;}
	
	

	#bio img {
		width: 150px;
		border-radius: 100%;
		box-shadow: 0px 0px 13px #bbbbbb;
		border: 8px solid #bbbbbb;
		padding: 50px;
		
	}
	#bio{
		display: flex;
		align-items: center;
		text-align: center;
        margin: 50px;		
	}
		.formation {
			margin-left: 20px;
			text-align: center;
			<p>
			2018| PerfectionnementBureautique C2I
			2016| Perfectionnement Bureautique C2I Niveau 1
			2013| L2 Droit Université deMontpellier
			2012| L1 Droit Université deMontpellier
			</p>
		}
		
		/* ceci est une remarque
		#competences{
	background-color:gray;
	padding:20px;
	border:10px dashed black;
}
*/


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

.barreRemplissage {
	width: 80%;
	height: 100%;
	background-color: #0182ab;
	border-radius: 10px;
	translateX(50%) translateY(100%) translateY(10px);
  transition: transform 1s, opacity 0.5s;
}