header{display:flex;flex-direction:column;align-items:stretch;gap:var(--inner-spacing);justify-content:space-around;padding-bottom:0;.text-container{width:100%;display:flex;flex-direction:column;gap:var(--inner-spacing);align-items:center;justify-content:center;order:2;h1{font-size:var(--font-size-max);margin:0}p{font-size:var(--font-size-lg);margin:0}p span.word-cycler{display:inline-grid;text-align:center;vertical-align:top;height:1.2rem;span{grid-area:1 / 1;opacity:0;animation:cycle-words 12s infinite}span:nth-child(1){animation-delay:0s}span:nth-child(2){animation-delay:2s}span:nth-child(3){animation-delay:4s}span:nth-child(4){animation-delay:6s}span:nth-child(5){animation-delay:8s}span:nth-child(6){animation-delay:10s}}.socials{display:flex;justify-content:center;align-items:center;gap:1rem;a{font-size:var(--font-size-xl)}a:hover{text-decoration:none}}}.image-container{position:relative;order:1;width:100%;container-type:inline-size;container-name:home-image;img{width:100%;height:100%;border-bottom:3px solid var(--text-link-color)}div.fragment{display:block;position:absolute;font-family:var(--font-family-decorations),monospace;color:var(--accent-color);animation:bounce 3s infinite ease-in-out;font-size:2cqw}div.code.fragment>p{margin:0;padding:0}div.code.fragment#json{--bounce-amount: 16px;bottom:45%;left:0}div.code.fragment#function{--bounce-amount: 14px;bottom:55%;left:-2%}div.code.fragment#git{--bounce-amount: 12px;bottom:65%;left:5%}div.code.fragment#css-variable{--bounce-amount: 10px;bottom:75%;left:0}div.design.fragment#pen{--bounce-amount: 12px;bottom:70%;right:10%;width:7cqw}div.design.fragment#fill{--bounce-amount: 10px;bottom:59%;right:16%;width:8cqw}div.design.fragment#image{--bounce-amount: 16px;bottom:50%;right:4%;width:10cqw}div.design.fragment#resize{--bounce-amount: 14px;bottom:46%;right:16%;width:7cqw}div.design.fragment#articles{--bounce-amount: 10px;bottom:38%;right:10%;width:6cqw}}@media(min-width:720px){flex-direction:row;border-bottom:2px solid var(--text-link-color);.text-container{order:1}.image-container{order:2;img{border-bottom:0}}}@media(min-width:1080px){border-bottom:4px solid var(--text-link-color)}}main{border-bottom:3px solid var(--text-link-color);@media(min-width:1080px){border-bottom:4px solid var(--text-link-color)}}section{border-bottom:1px solid var(--border-color)}section.value-propositions{padding-bottom:var(--inner-spacing);h2{text-align:center}.grid-container{grid-template-columns:1fr;padding-bottom:0}.item{display:flex;flex-direction:column;gap:var(--inner-spacing);padding-bottom:var(--inner-spacing);border-bottom:1px solid var(--border-color);&:last-child{border-bottom:0;padding-bottom:0}.illustration{width:64px;height:64px;color:var(--accent-color);svg{width:100%;height:100%}}.content{flex:1;h3{margin-top:0}p:last-child{margin-bottom:0}}@media(min-width:720px){flex-direction:row;align-items:center;gap:calc(var(--inner-spacing) * 2);.illustration{width:120px;height:120px}}}}section.get-in-touch{display:flex;gap:var(--inner-spacing);flex-direction:column;padding:var(--inner-spacing) 0;p{margin-bottom:0}.actions{margin-bottom:6px;>*:not(:first-child){display:none}@media(min-width:560px){flex-direction:row;>*:not(:first-child){display:block}}@media(min-width:1080px){justify-content:center}}}section.featured-content{padding:var(--inner-spacing) 0}section:last-child{border-bottom:0;margin-bottom:calc(var(--inner-spacing) * -1)}.actions{display:flex;gap:max(2rem,var(--inner-spacing));align-items:baseline}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(var(--bounce-amount))}to{transform:translateY(0)}}@keyframes cycle-words{0%{opacity:0;transform:translateY(50%)}2%{opacity:1;transform:none}15%{opacity:1;transform:none}16.66%{opacity:0;transform:translateY(-50%)}to{opacity:0;transform:translateY(-50%)}}.anim-cursor{animation:blink 1s step-end infinite}.anim-target{animation:pulse-target 2s infinite ease-in-out}.anim-bar-1,.anim-bar-2,.anim-bar-3{transform-box:fill-box;transform-origin:bottom;animation:bar-rise 3s infinite ease-in-out}.anim-bar-1{animation-delay:0s}.anim-bar-2{animation-delay:.4s}.anim-bar-3{animation-delay:.8s}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes pulse-target{0%,to{opacity:1}50%{opacity:.3}}@keyframes bar-rise{0%,to{transform:scaleY(1)}50%{transform:scaleY(.7)}}