:root {
  --pageBlack: #262626;
  --pageYellow: #ffd83e;
  --pagePurple: #552b55;
  --pageRed: #E1332d;
  --pageGreen: #2ce771;
  --pageGrey: #212121;

}
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* background-color: var(--pageGrey); */
  background-color: #ffd83e;
}
svg {
  width: 30px;
  height: 30px;
}
.container {
  display: flex;
  text-align: center;
}
.icon {  
  display: inline-block;
  height: 90px;
  width:  90px;
  background-color: #f1f1f1;
  margin: 10px;
  border-radius: 30%;  
  box-shadow: 0 5px 15px -5px #00000070;
  position: relative;
  overflow: hidden;
}
.change-my-color {  
  fill: #10ac84; 
}
.icon p {
  margin: 0;
  line-height: 90px;
  font-size: 25px;
}

.icon svg {  
  transition: all .2s;
} 
.icon:hover svg {
  transform: scale(1.3);
}
.icon:hover .change-my-color {  
  fill: #f1f1f1;
}
.icon:before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background-color: rgb(16, 172, 132);
  left: -110%;
  top: 90%;
  transform: rotate(45deg);
  ;
} 
.icon:hover:before {
  animation: animation .7s 1 forwards
}

@keyframes animation {
  0% {
    left: -110%;
    top: 90%;
  }
  50% {
    left: 10%;
    top: -30%;
  }
  100% {
    left: -10%;
    top: -10%;
  }
}

/*
.fa-facebook:before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path   fill="rgb(16, 172, 132)" d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>');
} */