.icon::after,.tile span{width:100%;position:absolute}.icon::after,.tile{transition:.2s ease-in-out}:root{--color-primary:#e0e0e0;--color-secodary:#151a1f}*{margin:0;padding:0;font:inherit;font-family:sans-serif}*,::after,::before{box-sizing:border-box;color:var(--color-primary)}:focus{outline:0}body{display:flex;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;background:var(--color-secodary)}.tile,img{display:block}img{border:0;max-width:100%}a,a:active,a:visited{text-decoration:none}ul{gap:.5rem;display:flex;list-style:none}h1{position:fixed;bottom:1rem;right:1rem}h1 span{display:none}h1 img{height:1rem}.tile{--tile-width:clamp(16vh, 22vw, 14rem);position:relative;width:var(--tile-width);height:var(--tile-width)}.tile span{top:50px;font-size:1.5em;text-align:center;will-change:top;transition:top .2s ease-in-out}ul:has(li>.tile:hover,li>.tile:focus-visible) li>.tile:not(:hover,:focus-visible){opacity:.6;transform:scale(.9);&.icon::after{border-radius:.75rem}}.tile:focus-visible span,.tile:hover span{top:-25%}.icon::after{content:"";height:100%;border-radius:50%;background:var(--color-primary) center no-repeat;background-size:55%}.linkedin::after{background-image:url(img/linkedin.svg)}.npm::after{background-image:url(img/npm.svg)}.github::after{background-image:url(img/github.svg)}.packagist::after{background-image:url(img/packagist.png)}@media (max-width:912px){.tile span{display:none}}@media (max-width:912px) and (orientation:portrait){.tile{--tile-width:clamp(20vh, 22vw, 14rem)}.tiles{flex-direction:column-reverse;>li:first-of-type ul{flex-direction:row-reverse}}}path:first-of-type{fill:#E0E0E0}