/* From Uiverse.io by Valeron-T */ 
.socialcard {
  display: flex;
  height: 70px;
  width: 350px;
}

.socialcard svg {
  position: absolute;
  display: flex;
  width: 60%;
  height: 100%;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 2;
  padding: 0.25rem;
  cursor: pointer;
}

.socialcard .social-link1,.socialcard .social-link2,.socialcard .social-link3,.socialcard .social-link4,.socialcard .social-link5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: whitesmoke;
  font-size: 24px;
  text-decoration: none;
  transition: 0.25s;
  border-radius: 50px;
}

.socialcard svg {
  transform: scale(1);
}

.socialcard .social-link1:hover {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  animation: bounce_613 0.4s linear;
}

.socialcard .social-link2:hover {
  background-color: #242c34;
  animation: bounce_613 0.4s linear;
}

.socialcard .social-link3:hover {
  background-color: #5865f2;
  animation: bounce_613 0.4s linear;
}

.socialcard .social-link4:hover {
  background-color: #0a66c2;
  animation: bounce_613 0.4s linear;
}

.socialcard .social-link5:hover {
  background-color: #ff8000;
  animation: bounce_613 0.4s linear;
}

@keyframes bounce_613 {
  40% {
    transform: scale(1.4);
  }

  60% {
    transform: scale(0.8);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}