Social_Icon1.css

*{
  margin: 0;
  padding: 0;
}
body{
  background: #f1f1f1;
}
h1{
  font-family: sans-serif;
  font-weight: normal;
  font-size: 25px;
  letter-spacing: 4px;
  padding: 200px 0 100px;
  color: #007cc4;
  text-align: center;

}
.Social-media{
  display: flex;
  justify-content: center;
}
a{
  display: flex;
  background: #fff;
  height: 45px;
  width: 45px;
  margin: 0 15px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 6px 6px 10px -1px rgba(0,124,196,0.15),
              -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0, 124, 196, 0);
  transition: transform 0.5s
}
a i{
  font-size: 50px
  color:#777;
  transition: transform 0.5s;
}
a:hover{
  box-shadow:inset 4px 4px 6px -2px rgba(0,0,0,0.2),
              inset -4px -4px 6px -1px rgba(255,255,255,0.7),
                    -0.5px -0.5px 0px -1px rgba(255,255,255,1),
                    0.5px 0.5px 0px rgba(0,0,0,0.15),
                    0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0, 124, 196, 0.1);
  transform: translateY(2px);
}
a:hover i{
  transform: scale(0.90);
}
a:hover .fa-facebook{
  color: #3b5998;
}
a:hover .fa-twitter{
  color: #00acee;
}
a:hover .fa-whatsapp{
  color: #4fce5d;
}
a:hover .fa-instagram{
  color: #f14843;
}
a:hover .fa-youtube{
  color: #f00;
}