:root {
  --color-google: #4285f4;
  --color-facebook: #1877f2;
  --color-spotify: #1db954;
  --color-linkedin: #0a66c2;
  --color-github: #333333;
  --color-dribbble: #ea4c89;
  --color-twitch: #9146ff;
  --color-twitter: #14171a;
  --color-discord: #5865f2;
  --color-google-hover: #186bf2;
  --color-facebook-hover: #0b5ac1;
  --color-spotify-hover: #168d40;
  --color-linkedin-hover: #074788;
  --color-github-hover: #141414;
  --color-dribbble-hover: #db1a64;
  --color-twitch-hover: #6c0aff;
  --color-twitter-hover: #090a0c;
  --color-discord-hover: #4150f1;
}

.r-50 {
  border-radius: 50px;
}

.r-5 {
  border-radius: 5px;
}

.linkify-button {
  margin: 10px;
  padding: 0 20px;
  height: 45px;
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.2s ease;
}

.linkify-button_inner {
  height: 100%;
  transition: transform 0.2s ease;
}

.linkify-button_content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.linkify-button_content .linkify-button_icon {
  height: 22px;
}

.linkify-button.google-btn:hover {
  color: var(--color-google);
  border-color: var(--color-google);
}

.linkify-button.facebook-btn:hover {
  color: var(--color-facebook);
  border-color: var(--color-facebook);
}

.linkify-button.spotify-btn:hover {
  color: var(--color-spotify);
  border-color: var(--color-spotify);
}

.linkify-button.linkedin-btn:hover {
  color: var(--color-linkedin);
  border-color: var(--color-linkedin);
}

.linkify-button.github-btn:hover {
  color: var(--color-github);
  border-color: var(--color-github);
}

.linkify-button.dribbble-btn:hover {
  color: var(--color-dribbble);
  border-color: var(--color-dribbble);
}

.linkify-button.twitch-btn:hover {
  color: var(--color-twitch);
  border-color: var(--color-twitch);
}

.linkify-button.twitter-btn:hover {
  color: var(--color-twitter);
  border-color: var(--color-twitter);
}

.linkify-button.discord-btn:hover {
  color: var(--color-discord);
  border-color: var(--color-discord);
}

/* for rollup effect */
.linkify-button.rollup .linkify-button_inner {
  transform: translateY(0px);
}

.linkify-button.rollup:hover .linkify-button_inner {
  transform: translateY(-43px);
}

/* for rolldown effect */
.linkify-button.rolldown .linkify-button_inner {
  transform: translateY(-43px);
}

.linkify-button.rolldown:hover .linkify-button_inner {
  transform: translateY(0px);
}

.linkify-button.google-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-google);
  border: transparent;
}

.linkify-button.facebook-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-facebook);
  border: transparent;
}

.linkify-button.spotify-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-spotify);
  border: transparent;
}

.linkify-button.dribbble-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-dribbble);
  border: transparent;
}

.linkify-button.github-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-github);
  border: transparent;
}

.linkify-button.linkedin-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-linkedin);
  border: transparent;
}

.linkify-button.twitch-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-twitch);
  border: transparent;
}

.linkify-button.twitter-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-twitter);
  border: transparent;
}

.linkify-button.discord-btn.is-solid {
  color: #ffffff;
  background-color: var(--color-discord);
  border: transparent;
}

.linkify-button.google-btn.is-solid:hover {
  background-color: var(--color-google-hover);
}

.linkify-button.facebook-btn.is-solid:hover {
  background-color: var(--color-facebook-hover);
}

.linkify-button.spotify-btn.is-solid:hover {
  background-color: var(--color-spotify-hover);
}

.linkify-button.linkedin-btn.is-solid:hover {
  background-color: var(--color-linkedin-hover);
}

.linkify-button.dribbble-btn.is-solid:hover {
  background-color: var(--color-dribbble-hover);
}

.linkify-button.github-btn.is-solid:hover {
  background-color: var(--color-github-hover);
}

.linkify-button.twitch-btn.is-solid:hover {
  background-color: var(--color-twitch-hover);
}

.linkify-button.twitter-btn.is-solid:hover {
  background-color: var(--color-twitter-hover);
}

.linkify-button.discord-btn.is-solid:hover {
  background-color: var(--color-discord-hover);
}