html {
  scrollbar-width: thin;
  scrollbar-color: gray white;

}

html::-webkit-scrollbar {
width: 0.5rem;
border-radius: 20px;
background-color: white;
}

html::-webkit-scrollbar-thumb {
background-color: gray;

}


body {
  margin: 0px;
  padding: 0px;
  background-color: #EEEEEE;
  
}


nav {
  top: 0px;
  position:fixed;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid lightgray;  
  z-index: 10;
 
}



nav li {
  list-style-type: none;
  display: inline-block;
 
}







.contenu {
  margin: 100px 15% auto;

}


.contenu .contacter-partager {
width: 100%;
margin-top: 20px;
text-align: ;
/*box-shadow: 2px 4px 7px lightgray;*/
background-color: ;
}


.contenu .contacter-partager li {
padding: 20px;
list-style-type: none;
text-align: right;
}


.contenu .contacter-partager li a {

background-color: ;
text-align: center;
display: inline-block;
height: 50px;
width: 50px;
text-decoration: none;
color: #555555;
border: 1px solid lightgray;
border-radius: 5px;
overflow: hidden;
box-shadow: 2px 3px 3px lightgray;
}

.contenu .contacter-partager li a span {
display: block;
font-size: 30px;
padding: 2px;
}


.contenu .contacter-partager li a .name {
font-size: 10px;
font-family: sans-serif;

}






footer {
  width: 100%;
  margin-top: 40px;
  background-color: ;
  text-align: center;
  color: black;
  opacity: 1;
}

footer:hover {
  opacity: 1;
}

footer li{
list-style-type: none;
margin-top: 8px;
font-size: 12px;
font-family: sans-serif;
} 










@media screen and (min-width: 0px) and (max-width: 768px) {





.contenu {
  margin: 80px 2% auto;

}







.contenu .contacter-partager {
width: 100%;
margin-top: 20px;
text-align: ;
/*box-shadow: 2px 4px 7px lightgray;*/
background-color: ;
}


.contenu .contacter-partager li {
padding: 20px;
list-style-type: none;
text-align: center;
}


.contenu .contacter-partager li a {

background-color: ;
text-align: center;
display: inline-block;
height: 45px;
width: 45px;
text-decoration: none;
color: #555555;
border: 1px solid lightgray;
border-radius: 5px;
overflow: hidden;
box-shadow: 2px 3px 3px lightgray;

}

.contenu .contacter-partager li a span {
display: block;
font-size: 25px;
padding: 3px;
}


.contenu .contacter-partager li a .name {
font-size: 8px;
font-family: sans-serif;

}










}