/*
* LittleLink Button Styles - Liquid Glass Edition
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Brand Button Base Styles with Liquid Glass Effect
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,button {
  position: relative;
  color: var(--button-text, #000000);
  background: var(--button-background, transparent);
  border: var(--button-border, none);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
}

/* Shine Effect for All Buttons */
.button::before,
button::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  width: 50%;
  height: 100%;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, transparent 75%);
  transform: skewX(-25deg) translateX(-150%);
  animation: shine-effect 5s infinite 3.5s;
  z-index: 999;
  pointer-events: none;
}

@keyframes shine-effect {
  0% { transform: skewX(-25deg) translateX(-150%); }
  15% { transform: skewX(-25deg) translateX(250%); }
  100% { transform: skewX(-25deg) translateX(250%); }
}

/* Global Button Hover Effect
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button:hover,button:hover {
  transform: translateY(-3px);
  box-shadow: var(--button-hover-shadow, 0 12px 40px rgba(0, 0, 0, 0.2));
}

.button:active,button:active {
  transform: translateY(0);
  box-shadow: var(--button-active-shadow, 0 2px 15px rgba(0, 0, 0, 0.1));
}

/* Button Icons */
.icon {
  filter: var(--icon-filter, none);
  position: relative;
  z-index: 2;
}

/* Ensure button text is above shine effect */
.button > *:not(::before),
button > *:not(::before) {
  position: relative;
  z-index: 2;
}

/* Brand-Specific Styles with Liquid Glass
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default */
.button.button-default {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(36, 87, 245, 0.9), rgba(36, 87, 245, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(36, 87, 245, 0.3);
}

/* Anytype */
.button-anytype {
  --button-text: #333333;
  --button-background: linear-gradient(135deg, rgba(243, 241, 230, 0.9), rgba(243, 241, 230, 0.7));
  --button-border: 0.5px solid rgba(33, 33, 33, 0.3) opacity(40%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}
/* Amazon */
.button-amazon {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Amazon Music */
.button-amazon-music {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(37, 209, 218, 0.9), rgba(37, 209, 218, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(37, 209, 218, 0.3);
}

/* Apple App Store */
.button-appstore {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Apple Invites */
.button-invites {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Apple Music */
.button-apple-music {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Apple Music Alt */
.button-apple-music-alt {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(251, 92, 116, 0.9), rgba(250, 35, 59, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(250, 35, 59, 0.3);
}

/* Apple Podcasts */
.button-apple-podcasts {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Apple Podcasts Alt */
.button-apple-podcasts-alt {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(244, 82, 255, 0.9), rgba(131, 43, 193, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(131, 43, 193, 0.3);
}

/* Bandcamp */
.button-bandcamp {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(29, 159, 195, 0.9), rgba(29, 159, 195, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(29, 159, 195, 0.3);
}

/* Behance */
.button-behance {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 87, 255, 0.9), rgba(0, 87, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 87, 255, 0.3);
}

/* Bluesky */
.button-bluesky {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(17, 133, 254, 0.9), rgba(17, 133, 254, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(17, 133, 254, 0.3);
}

/* Bluesky Alt */
.button-bluesky-alt {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Buy Me a Coffee */
.button-coffee {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 221, 0, 0.9), rgba(255, 221, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(255, 221, 0, 0.3);
}

/* Cal.com */
.button-cal {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(41, 41, 41, 0.9), rgba(41, 41, 41, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Calendly */
.button-calendly {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 107, 255, 0.9), rgba(0, 107, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 107, 255, 0.3);
}

/* Cash App */
.button-cash-app {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 214, 75, 0.9), rgba(0, 194, 68, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 194, 68, 0.3);
}

/* dev.to */
.button-dev-to {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Discogs */
.button-discogs {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Discogs Alt */
.button-discogs-alt {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Discord */
.button-discord {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(88, 101, 242, 0.9), rgba(88, 101, 242, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(88, 101, 242, 0.3);
}

/* Dribbble */
.button-dribbble {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Etsy */
.button-etsy {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(244, 88, 0, 0.9), rgba(244, 88, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(244, 88, 0, 0.3);
}

/* Facebook */
.button-faceb {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(8, 102, 255, 0.9), rgba(8, 102, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(8, 102, 255, 0.3);
}

/* Facebook Messenger */
.button-messenger {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(8, 102, 255, 0.9), rgba(8, 102, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(8, 102, 255, 0.3);
}

/* Figma */
.button-figma {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Fiverr */
.button-fiverr {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(29, 191, 115, 0.9), rgba(29, 191, 115, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(29, 191, 115, 0.3);
}

/* Flickr */
.button-flickr {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* GitHub */
.button-github {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* GitLab */
.button-gitlab {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(97, 81, 178, 0.9), rgba(97, 81, 178, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(97, 81, 178, 0.3);
}

/* GoFundMe */
.button-gofundme {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(2, 169, 92, 0.9), rgba(2, 169, 92, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(2, 169, 92, 0.3);
}

/* Goodreads */
.button-goodreads {
  --button-text: #333333;
  --button-background: linear-gradient(135deg, rgba(243, 241, 230, 0.9), rgba(243, 241, 230, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Google Black */
.button-google-black {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Google Play Store */
.button-playstore {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Google Scholar */
.button-google-scholar {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Hashnode */
.button-hashnode {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Instagram */
.button-instagram {
  --button-text: #ffffff;
  --button-background: linear-gradient(-135deg, rgba(20, 0, 200, 0.9), rgba(185, 0, 180, 0.85), rgba(245, 0, 0, 0.9));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(245, 0, 0, 0.3);
}

/* Kick */
.button-kick {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Kick Alt */
.button-kick-alt {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(1, 231, 1, 0.9), rgba(1, 231, 1, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(1, 231, 1, 0.3);
}

/* Kickstarter */
.button-kickstarter {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(5, 206, 120, 0.9), rgba(5, 206, 120, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(5, 206, 120, 0.3);
}

/* Kit */
.button-kit {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Ko-fi */
.button-ko-fi {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Last.fm */
.button-last-fm {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(213, 16, 7, 0.9), rgba(213, 16, 7, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(213, 16, 7, 0.3);
}

/* Letterboxd */
.button-letterboxd {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(44, 52, 64, 0.9), rgba(44, 52, 64, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Line */
.button-line {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(6, 199, 85, 0.9), rgba(6, 199, 85, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(6, 199, 85, 0.3);
}

/* LinkedIn */
.button-linked {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(40, 103, 178, 0.9), rgba(40, 103, 178, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(40, 103, 178, 0.3);
}

/* Mailchimp */
.button-mailchimp {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 224, 27, 0.9), rgba(255, 224, 27, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(255, 224, 27, 0.3);
}

/* Mastodon */
.button-mastodon {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(23, 6, 59, 0.9), rgba(23, 6, 59, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(23, 6, 59, 0.3);
}

/* Matrix */
.button-matrix {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Meetup */
.button-meetup {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Meetup Alt */
.button-meetup-alt {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(237, 28, 64, 0.9), rgba(237, 28, 64, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(237, 28, 64, 0.3);
}

/* Medium */
.button-medium {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Microsoft */
.button-microsoft {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Notion */
.button-notion {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Obsidian */
.button.button-obsidian {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(38, 38, 38, 0.9), rgba(38, 38, 38, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* OnlyFans */
.button-onlyfans {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 174, 239, 0.9), rgba(0, 174, 239, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 174, 239, 0.3);
}

/* Patreon */
.button-patreon {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* PayPal */
.button-paypal {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 41, 145, 0.9), rgba(0, 41, 145, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 41, 145, 0.3);
}

/* Pinterest */
.button-pinterest {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3) opacity (40%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Product Hunt */
.button-product-hunt {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Reddit */
.button-reddit {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(255, 69, 0, 0.9), rgba(255, 69, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(255, 69, 0, 0.3);
}

/* Shop */
.button-shop {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(90, 49, 244, 0.9), rgba(90, 49, 244, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(90, 49, 244, 0.3);
}

/* Signal */
.button-signal {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(59, 69, 253, 0.9), rgba(59, 69, 253, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(59, 69, 253, 0.3);
}

/* Signal Alt */
.button-signal-alt {
  --button-text: #3B45FD;
  --button-background: linear-gradient(135deg, rgba(227, 232, 254, 0.9), rgba(227, 232, 254, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(59, 69, 253, 0.2);
}

/* Slack */
.button-slack {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Snapchat */
.button-snapchat {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 252, 0, 0.9), rgba(255, 252, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(255, 252, 0, 0.3);
}

/* SoundCloud */
.button-soundcloud {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(255, 85, 0, 0.9), rgba(255, 85, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(255, 85, 0, 0.3);
}

/* Spotify */
.button-spotify {
  --button-text: #191414;
  --button-background: linear-gradient(135deg, rgba(29, 185, 84, 0.9), rgba(29, 185, 84, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(29, 185, 84, 0.3);
}

/* Spotify Alt */
.button-spotify-alt {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(25, 20, 20, 0.9), rgba(25, 20, 20, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Square */
.button-square {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 106, 255, 0.9), rgba(0, 106, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 106, 255, 0.3);
}

/* Stack Overflow */
.button-stack-overflow {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Steam */
.button-steam {
  --button-text: #ffffff;
  --button-background: linear-gradient(90deg, rgba(8, 187, 255, 0.9), rgba(43, 117, 255, 0.8));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(43, 117, 255, 0.3);
}

/* Steam Alt */
.button-steam-alt {
  --button-text: #ffffff;
  --button-background: linear-gradient(90deg, rgba(9, 23, 42, 0.9), rgba(7, 42, 87, 0.85), rgba(12, 80, 133, 0.9));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Strava */
.button-strava {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(252, 82, 0, 0.9), rgba(252, 82, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(252, 82, 0, 0.3);
}

/* Substack */
.button-substack {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(255, 103, 25, 0.9), rgba(255, 103, 25, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(255, 103, 25, 0.3);
}

/* Telegram */
.button-telegram {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(63, 174, 232, 0.9), rgba(63, 174, 232, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(63, 174, 232, 0.3);
}

/* Threads */
.button-threads {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Threema */
.button-threema {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(63, 230, 105, 0.9), rgba(63, 230, 105, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(63, 230, 105, 0.3);
}

/* TikTok */
.button-tiktok {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Trello */
.button-trello {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 101, 255, 0.9), rgba(0, 101, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 101, 255, 0.3);
}

/* Tumblr */
.button-tumb {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(19, 19, 19, 0.9), rgba(19, 19, 19, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Twitch */
.button-twitch {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(145, 70, 255, 0.9), rgba(145, 70, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(145, 70, 255, 0.3);
}

/* Unsplash */
.button-unsplash {
  --button-text: #000000;
  --button-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --button-border: 1px solid rgba(33, 33, 33, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(33, 33, 33, 0.15);
}

/* Venmo */
.button-venmo {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(0, 140, 255, 0.9), rgba(0, 140, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(0, 140, 255, 0.3);
}

/* Vimeo */
.button-vimeo {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(26, 183, 234, 0.9), rgba(26, 183, 234, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(26, 183, 234, 0.3);
}

/* VSCO */
.button-vsco {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* WhatsApp */
.button-whatsapp {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(69, 90, 100, 0.9), rgba(69, 90, 100, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(69, 90, 100, 0.3);
}

/* WordPress */
.button-wordpress {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(56, 88, 233, 0.9), rgba(56, 88, 233, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(56, 88, 233, 0.3);
}

/* X */
.button-x {
  --button-text: #FFFFFF;
  --button-background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* YouTube */
.button-yt {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(40, 40, 40, 0.9), rgba(40, 40, 40, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* YouTube Alt */
.button-yt-alt {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 0, 0, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(255, 0, 0, 0.3);
}

/* Zoom */
.button-zoom {
  --button-text: #ffffff;
  --button-background: linear-gradient(135deg, rgba(11, 92, 255, 0.9), rgba(11, 92, 255, 0.7));
  --button-border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 8px 32px rgba(11, 92, 255, 0.3);
}