html {
	scroll-behavior:smooth;
}

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

nav ul {
	list-style: none;
	display: flex;
	background:rgb(106,200,255);
	padding: 20px;
	justify-content: center;


}

nav a {
	 -webkit-transition:0.6s;
  color:#ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}

nav a:hover {
	 -webkit-transition:0.7s;
	background-color: #ffffff;
  color: rgb(106,220,255);
  padding: 24px 50px;
}


header, footer{
	background: rgb(106,220,255);
	background: linear-gradient(90deg, rgb(106,220,255) 30%, rgb(106,180,255) 60%, rgb(106,120,255) 90%);
	padding: 50px;
	text-align: center;
	color: #ffffff;
}

h1{
	color: white;
	text-align: center;
	font-family: 'Gloria', sans-serif;
	font-size: 70px;
	text-shadow: 1px 1px 1px black;
}

h2{
	color: rgb(106,180,255);
	text-align: center;
	font-family: 'courrier', sans-serif;
	font-size: 40px;
}

h3{
	color: rgb(106,120,255);
	font-family: 'Roboto', sans-serif;
	font-size: 25px;
}

p{
	color: #black;
	font-size: 16px;
	text-align: justify;
	margin-left: 10px;
	margin-right: 10px;
}


#profil, #formations, #experiences {
	background-color: #ffffff;
	padding: 50px;

	margin: 20px auto;

	width: 80%;
	box-shadow: 10px 10px 10px #bbbbbb;

}

#biocontenu {
	display:flex;
	align-items:center;
	padding left:50px;
}

#biocontenu p {
	padding-left:50px;
}

#photohugo{
  border-radius: 100%;
  box-shadow: 10px 10px 10px #bbbbbb;
  padding: 5px;
  width: 200px;
}

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

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

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

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


#competences{
	position: relative;
	display:inline-block;
	vertical-align: top;
	padding-left: 120px;
}


#certifications{
	position: relative;
	display:inline-block;
	vertical-align: top;
	padding-left: 120px;
}

#certifications img{
	padding: 60px;
}

#certifications h3{
	text-align: center;
}

#compcert{
	background-color: #ffffff;
	padding: 50px;
	margin: 20px auto;
	width: 80%;
	box-shadow: 10px 10px 10px #bbbbbb;
}

.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;
}