@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css");@scope{:scope{display:flex;gap:1rem;align-items:center}:scope .social-link{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:transparent;border:none;border-radius:50%;text-decoration:none;transition:all 0.3s ease;position:relative;overflow:visible}@media (max-width: 700){:scope .social-link{width:25px;height:25px}}:scope .social-link .social-icon{font-size:1.8rem;transition:all 0.3s ease;text-shadow:0 0 5px currentColor;opacity:0.9}:scope .social-link .social-icon-img:hover{filter:drop-shadow(0 0 10px cyan) drop-shadow(0 0 20px cyan) drop-shadow(0 0 40px cyan)}:scope .social-link:hover{transform:translateY(-2px) scale(1.1)}:scope .social-link[title="Twitter"] .social-icon,:scope .social-link[title="X"] .social-icon,:scope .social-link[title="X (formerly Twitter)"] .social-icon,:scope .social-link .social-link-twitter .social-icon{color:#1DA1F2}:scope .social-link[title="Twitter"]:hover,:scope .social-link[title="X"]:hover,:scope .social-link[title="X (formerly Twitter)"]:hover,:scope .social-link .social-link-twitter:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #aeddfa) drop-shadow(0 0 8px #def1fd);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Xing"] .social-icon,:scope .social-link .social-link-xing .social-icon{color:#006567}:scope .social-link[title="Xing"]:hover,:scope .social-link .social-link-xing:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #01faff) drop-shadow(0 0 8px #34fbff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="LinkedIn"] .social-icon,:scope .social-link .social-icon-linkedin .social-icon{color:#0077B5}:scope .social-link[title="LinkedIn"]:hover,:scope .social-link .social-icon-linkedin:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #4fc3ff) drop-shadow(0 0 8px #82d4ff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Email"] .social-icon,:scope .social-link .social-link-email .social-icon{color:#D44638}:scope .social-link[title="Email"]:hover,:scope .social-link .social-link-email:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #efbbb6) drop-shadow(0 0 8px #f8e2e0);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Mastodon"] .social-icon,:scope .social-link .social-link-mastodon .social-icon{color:#6364FF}:scope .social-link[title="Mastodon"]:hover,:scope .social-link .social-link-mastodon:hover{filter:drop-shadow(0 0 5px #000030) drop-shadow(0 0 7px #fcfcff) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Reddit"] .social-icon,:scope .social-link .social-link-reddit .social-icon{color:#ff4500}:scope .social-link[title="Reddit"]:hover,:scope .social-link .social-link-reddit:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #ffb599) drop-shadow(0 0 8px #ffdacc);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Twitch"] .social-icon,:scope .social-link .social-icon-twitch .social-icon{color:#9146FF}:scope .social-link[title="Twitch"]:hover,:scope .social-link .social-icon-twitch:hover{filter:drop-shadow(0 0 5px #080013) drop-shadow(0 0 7px #ecdfff) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Discord"] .social-icon{color:#5865F2}:scope .social-link[title="Discord"]:hover{filter:drop-shadow(0 0 5px #020316) drop-shadow(0 0 7px #e6e8fd) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Patreon"] .social-icon{color:#F96854}:scope .social-link[title="Patreon"]:hover{filter:drop-shadow(0 0 5px #1a0401) drop-shadow(0 0 7px #feebe8) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Buy Me a Coffee"] .social-icon{color:#FF813F}:scope .social-link[title="Buy Me a Coffee"]:hover{filter:drop-shadow(0 0 5px #0c0400) drop-shadow(0 0 7px #ffe5d8) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="PayPal"] .social-icon{color:#003087}:scope .social-link[title="PayPal"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #2170ff) drop-shadow(0 0 8px #5491ff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Spotify"] .social-icon{color:#1ed760}:scope .social-link[title="Spotify"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #9df1bb) drop-shadow(0 0 8px #c9f8da);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="TikTok"] .social-icon{color:#69c9d0}:scope .social-link[title="TikTok"]:hover{filter:drop-shadow(0 0 5px #020505) drop-shadow(0 0 7px #ddf3f5) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="RSS"] .social-icon{color:#f60}:scope .social-link[title="RSS"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #ffc299) drop-shadow(0 0 8px #ffe0cc);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="GitLab"] .social-icon{color:#FC6D26}:scope .social-link[title="GitLab"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #fed3bd) drop-shadow(0 0 8px #fff4ef);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Bitbucket"] .social-icon{color:#205081}:scope .social-link[title="Bitbucket"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #629cd8) drop-shadow(0 0 8px #8bb6e2);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="CodePen"] .social-icon{color:#000}:scope .social-link[title="CodePen"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #4d4d4d) drop-shadow(0 0 8px #666);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Stack Overflow"] .social-icon{color:#F48023}:scope .social-link[title="Stack Overflow"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #fbd4b5) drop-shadow(0 0 8px #fef0e5);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Medium"] .social-icon{color:#00AB6C}:scope .social-link[title="Medium"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #45ffba) drop-shadow(0 0 8px #78ffcd);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Dev.to"] .social-icon{color:#0A0A0A}:scope .social-link[title="Dev.to"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #575757) drop-shadow(0 0 8px #707070);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Goodreads"] .social-icon{color:#382110}:scope .social-link[title="Goodreads"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #af6732) drop-shadow(0 0 8px #cb8049);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Telegram"] .social-icon{color:#08c}:scope .social-link[title="Telegram"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #6cf) drop-shadow(0 0 8px #9df);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="WhatsApp"] .social-icon{color:#25d366}:scope .social-link[title="WhatsApp"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #a2efbf) drop-shadow(0 0 8px #cef6dd);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Gitpod"] .social-icon{color:#33C3FF}:scope .social-link[title="Gitpod"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #ccf0ff) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Git"] .social-icon{color:#F34F29}:scope .social-link[title="Git"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #fbc6ba) drop-shadow(0 0 8px #feeeea);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="GitHub"] .social-icon{color:#6F42C1}:scope .social-link[title="GitHub"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #c7b5e7) drop-shadow(0 0 8px #e4dcf3);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="YouTube"] .social-icon{color:red}:scope .social-link[title="YouTube"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #f99) drop-shadow(0 0 8px #fcc);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Instagram"] .social-icon,:scope .social-link .social-link-Instagram .social-icon{color:#fd5949}:scope .social-link[title="Instagram"]:hover,:scope .social-link .social-link-Instagram:hover{filter:drop-shadow(0 0 5px #140200) drop-shadow(0 0 7px #ffe3e0) drop-shadow(0 0 8px #fff);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}:scope .social-link[title="Facebook"] .social-icon{color:#1877f2}:scope .social-link[title="Facebook"]:hover{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 7px #a9ccfa) drop-shadow(0 0 8px #d9e9fd);animation:gradientShift 2s linear infinite, pulse 1.5s ease-in-out infinite;transform:scale(1.1);text-shadow:0 0 10px currentColor, 0 0 20px currentColor;opacity:0.75}}
