/*************feuille de style*************************/

body{
  color: #7e8085;
}



.photoProfil{
  width: 20% !important;
  margin: auto;
}

footer{
  background-color:black;
}




.icon-footer{
  font-size: 30px !important;
  margin :10px;
}

.fa-phone-alt, .fa-envelope{
  margin:10px;
}

#nom-prenom{
  padding: 50px;
  font-size: 20px;
  color: #371C5F;
}


.ombre{
  justify-content: end; 
  -webkit-box-shadow: 20px 13px 5px 5px rgba(0,0,0,0.47);
-moz-box-shadow: 20px 13px 5px 5px rgba(0,0,0,0.47);
box-shadow: 20px 13px 5px 5px rgba(0,0,0,0.47);
}


#presentation{
  color: white;
  background-color: rgb(104, 102, 100);
  padding: 50px;
}

#competence{
  color: black;
  background-color: rgb(199, 195, 195);
  padding: 50px;
  
}

.competence1{
 
  margin-top: 30px;
  text-align: center;
  border-width:1px;
  border-style:inset;
}

#realisation h2{
  color: red;
  background-color: rgb(15, 15, 15);
  padding: 50px;
}

#experience{
  color: #fff;
  background-color: rgb(175, 171, 171);
  padding: 50px;
}

#formation{
  background-color: rgb(223, 217, 217);
  
}

#formation .card {
  margin-bottom: 50px;
}

.formation{
  background-color: rgb(240, 240, 240);
  margin-top: 125px;
  height: 100px;
  width: 100px;
  
}

.card-body{
  height: auto;
  padding: 50px;
}

#sociaux{
  color: rgb(8, 8, 8);
  background-color:rgb(236, 226, 226);
  padding: 50px;
}


/*************************************************/


/*****************  animation du nom et prenom ************************/
.intro {background-color: #0f0f0f; min-height: 350px; padding-top: 150px; font-family: 'Roboto Condensed', sans-serif; font-size: 21px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
  margin: 0 auto;
width: 320px;  
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}
/********************** fin animation du nom*************************/



/************************debut camembert***************************************/

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}
.single-chart {
  width: 33%;
  justify-content: space-around ;
}
.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.circular-chart.orange .circle {
  stroke: #FF9F00;
}
.circular-chart.green .circle {
  stroke: #4CC790;
}
.circular-chart.blue .circle {
  stroke: #3C9EE5;
}

.circular-chart.red .circle {
  stroke: red;
}
.circular-chart.yellow .circle {
  stroke:yellow;
}
.circular-chart.purple .circle {
  stroke: purple;
}
.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

/* ***************nom fromage ************************** */

.html
.css,
.js,
.php,
.sql,
.ps{ 
  color: #0f0f0f;

}

/****************carousel*********************/

div#carousel { 
  perspective: 1100px; 
  background: #b1a9a9; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }


/****** amal */
.fromage{
  border:1px solid lightgray;

}