body{



  /* background-color: #000; */

}



.heading{



  /* height: 100vh; */

  

}





.social-icons{



  display: flex;

  list-style: none;

}





.social-icons li a{



  padding: 20px;

  color: red;

  font-size: 25px;

  cursor: pointer;

 

  color: green;

  margin-right: 16px;

  position: relative;

  text-align: center;

  line-height: 70px;

  width: 100px;

  height: 100px;

}









.social-icons li a::before,.social-icons li a::after{



  content: "";

  

  position: absolute;

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  left:0;

  top: 0;

   transition: .5s linear;



}













.social-icons li a:hover i{



  transform: scale(1.1);



}





.social-icons li a:hover::before{



  transform: skewX(20deg);

  border-left: 3px solid;

  border-right: 3px solid;





}



.social-icons li a:hover::after{



  transform: skewY(-25deg);

   border-top: 3px solid;

  border-bottom: 3px solid;



}













@media (max-width:700px) {

    ul.social-icons {

    display: block;

}

}