:root {
    --link-size: 64px;
    --trans-props: all 0.3s ease;
  }
  
  
  .wrapper {
    width: 100%;
    height: 10vh;
  }
  
  .wrapper,
  .social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
  }
  
  /*** Containers and icons ***/
  
  .social-icon {
    display: flex;
  
    position: relative;
    overflow: hidden; /* Trim branded overlays */
  
    width: var(--link-size);
    height: var(--link-size);
    margin: 8px;
  
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12);
  
    text-decoration: none;
  
    transition: var(--trans-props);
  }
  
  .social-icon i {
    margin: auto; /* Perfect centering thanks to parental flex */
  
    font-size: 24px;
    color: hsl(212, 16%, 48%);
  
    z-index: 1; /* Make sure icons will be on top */
  
    transition: var(--trans-props);
  }
  
  /*** Branded overlays from the bottom ***/
  
  .social-icon:after {
    content: "";
  
    width: var(--link-size);
    height: var(--link-size);
  
    position: absolute;
  
    transform: translate(0, var(--link-size));
  
    border-radius: 50%;
    transition: var(--trans-props);
  }
  
  .social-icon.twitter:after {
    background-color: #1da1f2;
  }
  
  .social-icon.github:after {
    background-color: #24292e;
  }

  .social-icon.linkedin:after {
    background-color: #0071AE;
  }
  
  .social-icon.instagram:after {
    background-image: linear-gradient(
      to bottom left,
      #4f5bd5,
      #962fbf,
      #d62976,
      #fa7e1e,
      #feda75
    );
  }
  
  /*** Animations ***/
  
  .social-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
  }
  
  .social-icon:hover i {
    /*  transform: scale(1.1); */
    color: #fff;
  }
  
  .social-icon:hover:after {
    transform: translate(0) scale(1.2);
  }