body{background:radial-gradient(ellipse at top, cornflowerblue 0%, #185bd3 100%);background-attachment:fixed;background-repeat:no-repeat;font-size:large}a{color:gold;text-decoration:none}footer{text-align:center;padding-top:1em}article{margin-top:2em}.container{position:relative;display:inline-block;width:100px;height:100px;line-height:100px;text-align:center;margin:0 auto}.container .circle{fill:none;stroke:#ffffff;stroke-width:5px;stroke-dasharray:40;transition:all 0.2s ease-in-out;animation:outWaveOut 1s cubic-bezier(0.42, 0, 0.58, 1) forwards}.container .social{color:white;font-size:1.8em;position:absolute;top:0px;left:0px;width:100%;height:100%;transition:all 0.5s ease-in-out}.container:hover{cursor:pointer}.twitter:hover .circle{fill:#ffffff;fill-opacity:1;animation:outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards,colorTwitter 1s linear forwards}.twitter:hover .social{color:#3aaae1}.linkedin:hover .circle{fill:#ffffff;fill-opacity:1;animation:outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards,colorLinkedin 1s linear forwards}.linkedin:hover .social{color:#007bb6}.mastodon:hover .circle{fill:#ffffff;fill-opacity:1;animation:outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards,colorMastodon 1s linear forwards}.mastodon:hover .social{color:#6364ff}@keyframes colorMastodon{from{stroke:#ffffff}to{stroke:#6364ff}}@keyframes colorTwitter{from{stroke:#ffffff}to{stroke:#3aaae1}}@keyframes colorLinkedin{from{stroke:#ffffff}to{stroke:#007bb6}}@keyframes outWaveIn{to{stroke-width:10px;stroke-dasharray:400}}@keyframes outWaveOut{from{stroke-width:10px;stroke-dasharray:400}to{stroke:#ffffff;stroke-width:5px;stroke-dasharray:40}}