body{
  margin: 0;
  padding: 0;
  align-items: center;
}
.container{
  text-align: center;
  margin-top: 360px;
}
.btn{
  border: 1px solid #000000;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "montserrat";
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
  
}
.btn1,.btn2{
  color: #000000;
  margin-left: 110px;
}
.btn3,.btn4{
  color: #000000;
  margin-left: 510px;
}
.btn1:hover,.btn2:hover{
  color: #fff;
}
.btn3:hover,.btn4:hover{
  color: #ff0000;
}
.btn::before{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.8s;
}
.btn1::before,.btn3::before{
  top: 0;
  border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
  height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
  height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
  height: 0%;
}

.a:hover{
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
  inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
        -0.5px -0.5px 0px 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.15);
border: 1px solid rgba(0, 0, 0,0.01);     
transform: translateY(2px);       
} 

a:hover i{
  transform: scale(0.85);
}

a:hover .fa-instagram{
  color: #f14843;
}
a:hover .fa-linkedin{
  color: #0e76a8 ;
}
a:hover .fa-github{
  color: #333;
}
a:hover .fa-envelope{
  color: #f31616;
}

a i{
  font-size: 50px;
  color: rgb(255, 253, 253);
  transition:  0.5s;
}

.h{
  color: #000000;
}

/* 
.social-media{
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
} */