/* Colpari LinkStack brand styling */

body {
  display: flex;
  flex-direction: column;
}

.rounded-avatar {
  width: 112px;
  height: 112px;
  padding: 7px;
  object-fit: cover;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--colpari-blue), var(--colpari-orange)) border-box;
  border: 3px solid transparent;
  border-radius: 50%;
  box-shadow: 0 18px 48px rgba(0, 136, 173, 0.2);
}

.social-icon-div {
  padding: 4px 0 28px;
}

.social-icon {
  padding: 10px;
  color: var(--colpari-blue);
  font-size: 30px;
}

.social-icon:hover,
.social-icon:focus {
  color: var(--colpari-orange);
}

.button,
button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(100%, 420px);
  min-height: 52px;
  padding: 12px 20px;
  overflow: hidden;
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  background: var(--colpari-blue);
  border: 2px solid var(--colpari-blue);
  border-radius: var(--colpari-radius);
  box-shadow: 0 12px 28px rgba(0, 136, 173, 0.22);
  transition:
    transform var(--colpari-transition),
    box-shadow var(--colpari-transition),
    background-color var(--colpari-transition),
    border-color var(--colpari-transition);
}

.button::after,
button::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 42%, transparent 72%);
  opacity: 0;
  transform: translateX(-45%);
  transition: opacity var(--colpari-transition), transform var(--colpari-transition);
}

.button:hover,
button:hover,
.button:focus,
button:focus {
  color: #ffffff !important;
  background: var(--colpari-orange);
  border-color: var(--colpari-orange);
  box-shadow: 0 16px 34px rgba(226, 138, 0, 0.24);
  outline: 0;
  transform: translateY(-2px);
}

.button:hover::after,
button:hover::after,
.button:focus::after,
button:focus::after {
  opacity: 1;
  transform: translateX(45%);
}

.button.button-primary {
  color: #ffffff !important;
  background: var(--colpari-orange);
  border-color: var(--colpari-orange);
  box-shadow: 0 12px 28px rgba(226, 138, 0, 0.22);
}

.button.button-primary:hover,
.button.button-primary:focus {
  background: var(--colpari-blue);
  border-color: var(--colpari-blue);
}

.button img.icon {
  display: none;
}

.button .fa.icon,
button .fa.icon {
  display: none;
}

.button.button-custom,
.button.button-default,
.button.button-vrchat,
.button.button-discord,
.button.button-facebook,
.button.button-messenger,
.button.button-figma,
.button.button-github,
.button.button-goodreads,
.button.button-instagram,
.button.button-kit,
.button.button-linkedin,
.button.button-medium,
.button.button-pinterest,
.button.button-producthunt,
.button.button-reddit,
.button.button-skoob,
.button.button-snapchat,
.button.button-soundcloud,
.button.button-spotify,
.button.button-steam,
.button.button-telegram,
.button.button-tiktok,
.button.button-tumblr,
.button.button-twitch,
.button.button-twitter,
.button.button-vimeo,
.button.button-youtube,
.button.button-wordpress,
.button.button-bandcamp,
.button.button-patreon,
.button.button-signal,
.button.button-venmo,
.button.button-cashapp {
  background: var(--colpari-blue);
  border-color: var(--colpari-blue);
}

.button.button-custom:hover,
.button.button-custom:focus,
.button.button-default:hover,
.button.button-default:focus,
.button.button-vrchat:hover,
.button.button-vrchat:focus,
.button.button-discord:hover,
.button.button-discord:focus,
.button.button-facebook:hover,
.button.button-facebook:focus,
.button.button-messenger:hover,
.button.button-messenger:focus,
.button.button-figma:hover,
.button.button-figma:focus,
.button.button-github:hover,
.button.button-github:focus,
.button.button-goodreads:hover,
.button.button-goodreads:focus,
.button.button-instagram:hover,
.button.button-instagram:focus,
.button.button-kit:hover,
.button.button-kit:focus,
.button.button-linkedin:hover,
.button.button-linkedin:focus,
.button.button-medium:hover,
.button.button-medium:focus,
.button.button-pinterest:hover,
.button.button-pinterest:focus,
.button.button-producthunt:hover,
.button.button-producthunt:focus,
.button.button-reddit:hover,
.button.button-reddit:focus,
.button.button-skoob:hover,
.button.button-skoob:focus,
.button.button-snapchat:hover,
.button.button-snapchat:focus,
.button.button-soundcloud:hover,
.button.button-soundcloud:focus,
.button.button-spotify:hover,
.button.button-spotify:focus,
.button.button-steam:hover,
.button.button-steam:focus,
.button.button-telegram:hover,
.button.button-telegram:focus,
.button.button-tiktok:hover,
.button.button-tiktok:focus,
.button.button-tumblr:hover,
.button.button-tumblr:focus,
.button.button-twitch:hover,
.button.button-twitch:focus,
.button.button-twitter:hover,
.button.button-twitter:focus,
.button.button-vimeo:hover,
.button.button-vimeo:focus,
.button.button-youtube:hover,
.button.button-youtube:focus,
.button.button-wordpress:hover,
.button.button-wordpress:focus,
.button.button-bandcamp:hover,
.button.button-bandcamp:focus,
.button.button-patreon:hover,
.button.button-patreon:focus,
.button.button-signal:hover,
.button.button-signal:focus,
.button.button-venmo:hover,
.button.button-venmo:focus,
.button.button-cashapp:hover,
.button.button-cashapp:focus {
  background: var(--colpari-orange);
  border-color: var(--colpari-orange);
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 28px, 620px);
    padding-top: 32px;
  }

  .button,
  button {
    min-height: 50px;
    padding-right: 18px;
    padding-left: 18px;
  }
}