@import "https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fuzzy+Bubbles:wght@400;700&family=Jolly+Lodger&family=Luckiest+Guy&display=swap";
.socials-container{flex-direction:column;align-items:center;min-height:100vh;padding:2rem;display:flex;position:relative;overflow:hidden}.background-image{object-fit:cover;opacity:.9;z-index:-10}.socials-title{color:#faec00;-webkit-text-stroke:3px #b05e27;letter-spacing:5px;text-align:center;text-shadow:2px 2px 8px #000000b3;margin-top:2rem;margin-bottom:1rem;font-family:Cherry Bomb One,system-ui;font-size:7rem;animation:4s ease-in-out infinite titleFloat}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.socials-subtitle{color:#faec00;-webkit-text-stroke:3px #b05e27;letter-spacing:5px;text-align:center;text-shadow:1px 1px 3px #00000080;margin-top:10rem;margin-bottom:3rem;font-family:Cherry Bomb One,system-ui;font-size:3rem;animation:3s ease-in-out infinite subtitleFade}@keyframes subtitleFade{0%,to{opacity:.95}50%{opacity:.7}}.social-icons-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:4rem;margin-top:5rem;display:flex}.social-link{text-decoration:none;display:block}.social-icon-wrapper{animation:6s ease-in-out infinite iconFloat;animation-delay:calc(var(--i,0)*.5s);transition:all .3s;display:inline-block}.social-link:first-child .social-icon-wrapper{--i:0}.social-link:nth-child(2) .social-icon-wrapper{--i:1}@keyframes iconFloat{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-15px)rotate(5deg)}50%{transform:translateY(-25px)rotate(0)}75%{transform:translateY(-15px)rotate(-5deg)}}.social-icon{filter:brightness()drop-shadow(0 4px 8px #0006);width:300px;transition:all .3s}.social-link:hover .social-icon-wrapper{animation:1.5s ease-in-out infinite iconHover;transform:scale(1.15)}@keyframes iconHover{0%,to{transform:scale(1.15)translateY(0)rotate(0)}25%{transform:scale(1.15)translateY(-8px)rotate(3deg)}50%{transform:scale(1.15)translateY(-15px)rotate(0)}75%{transform:scale(1.15)translateY(-8px)rotate(-3deg)}}.social-link:hover .social-icon{filter:brightness(1.2)drop-shadow(0 8px 16px #00000080)}.duck-container{z-index:100;width:120px;height:120px;position:fixed;bottom:30px;right:30px}.duck-link{opacity:0;text-decoration:none;animation:.5s ease-in-out 1s forwards fadeIn;display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.duck-wrapper{cursor:pointer;min-width:120px;min-height:120px;position:relative}.floating-duck{filter:drop-shadow(0 10px 20px #0006)drop-shadow(0 0 15px #fff3);border-radius:50%;transition:all .3s;animation:5s ease-in-out infinite duckFloat,2s ease-in-out infinite duckBob,3s ease-in-out infinite duckWiggle;opacity:1!important;visibility:visible!important}@keyframes duckFloat{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-10px,-25px)rotate(-2deg)}50%{transform:translateY(-40px)rotate(0)}75%{transform:translate(10px,-25px)rotate(2deg)}}@keyframes duckBob{0%,50%,to{transform:translateY(0)}25%{transform:translateY(-8px)}75%{transform:translateY(-4px)}}@keyframes duckWiggle{0%,to{transform:rotate(0)}33%{transform:rotate(1deg)}66%{transform:rotate(-1deg)}}.duck-link:hover .floating-duck{filter:drop-shadow(0 15px 30px #00000080)drop-shadow(0 0 20px #ffffff4d);animation:2s ease-in-out infinite duckFloat,1s ease-in-out infinite duckBob,1.5s ease-in-out infinite duckWiggle;transform:scale(1.1)}.duck-link:hover .duck-wrapper:before{content:"";z-index:-1;background:radial-gradient(circle,#ffffff1a 0%,#fff0 70%);border-radius:50%;width:140%;height:140%;animation:1.5s ease-out infinite ripple;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes ripple{0%{opacity:.5;width:140%;height:140%}to{opacity:0;width:200%;height:200%}}@media (max-width:768px){.socials-title{margin-top:1.5rem;font-size:2.5rem}.socials-subtitle{margin-bottom:2rem;padding:0 1rem;font-size:1rem}.social-icons-container{flex-direction:column;gap:3rem;margin-top:4rem}.social-icon{width:70px;height:70px}.floating-duck{width:100px;height:100px}.duck-container{bottom:20px;right:20px}}@media (max-width:480px){.socials-title{font-size:2rem}.social-icon{width:60px;height:60px}.floating-duck{width:80px;height:80px}.duck-container{bottom:15px;right:15px}}
