.button{background-color:var(--background-color);color:var(--color);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1rem 2rem;border-radius:var(--border-radius);text-decoration:none;cursor:pointer;font-size:clamp(1.6rem,1.51rem + .24vi,1.8rem)}.button:before{--padding: 0;content:"";background-color:var(--background-color-hover);opacity:0;position:absolute;inset:calc(-1 * var(--padding));z-index:-1;block-size:100%;inline-size:100%;transition:opacity var(--animation-duration-fast) ease-in-out}.button svg{--size: 1.25em;block-size:var(--size);inline-size:var(--size)}.button:hover:before{opacity:1}.button:focus-visible{outline:none}.button:focus-visible:before{opacity:1;outline:var(--outline-focus-visible);transition:none}.button--primary{--background-color: var(--color-primary);--background-color-hover: var(--color-primary-darker);--color: var(--color-primary-opposite)}.button--github{--background-color: var(--color-gray-10);--background-color-hover: var(--color-gray-20);--color: var(--color-gray-90)}.button--icon{--background-color: transparent;--background-color-hover: var(--color-gray-90);--color: inherit;--padding: .5rem;background-color:transparent;display:inline-grid;place-items:center;padding:0;border:none}.button--icon:before{--padding: .5rem;block-size:unset;inline-size:unset;border-radius:999rem}.button--icon--primary{--background-color: transparent;--background-color-hover: var(--color-primary-fade);--color: var(--color-primary)}.button--large{font-size:clamp(1.8rem,1.54rem + .71vi,2.4rem)}main>section{display:grid;gap:3em;padding-block:4rem;padding-inline:var(--full-width-padding-inline)}main>section h2{font-size:clamp(3.2rem,2.51rem + 1.9vi,4.8rem)}main>section h3{font-size:clamp(2.4rem,1.89rem + 1.43vi,3.6rem)}main>section:nth-of-type(2n){background-color:var(--color-primary-section)}main .divider{background-color:var(--color-primary-section);block-size:8rem}main .divider.wide-to-narrow{clip-path:polygon(0% -1%,100% -1%,0% 100%)}main .divider.narrow-to-wide{clip-path:polygon(0% 100%,100% -1%,100% 100%)}#projects>ul{display:grid;gap:16rem}#projects>ul>li{display:grid;justify-items:center;gap:2rem}#projects>ul>li .info{display:grid;justify-items:center;gap:2rem;text-align:center}#projects>ul>li .info .title a{color:inherit;display:inline-flex;align-items:center;gap:1rem;font-size:clamp(2.4rem,2.23rem + .48vi,2.8rem);font-weight:700;text-decoration:none}#projects>ul>li .info .description{max-inline-size:70ch;font-size:clamp(1.6rem,1.51rem + .24vi,1.8rem);line-height:1.5}#projects>ul>li .info .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}#projects>ul>li .info .tags li{flex:0 0 4rem;aspect-ratio:1/1}#projects>ul>li .info .tags li svg,#projects>ul>li .info .tags li img{block-size:100%;inline-size:100%;object-fit:contain}#projects>ul>li .info .links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}#projects>ul>li .info .links li .button svg{block-size:1.5em}#projects>ul>li .mockup{display:grid;place-items:center}#projects>ul>li .mockup img{max-block-size:40rem;inline-size:auto}@media(width>=1000px){#projects>ul>li{grid-template-columns:1fr 1fr;align-items:center}#projects>ul>li .info{justify-items:start;text-align:start}#projects>ul>li .info .tags{justify-content:start}#projects>ul>li .info .links{justify-content:start}#projects>ul>li .mockup{order:2}#projects>ul>li .mockup img{max-block-size:50rem}}footer{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding-block:2rem;padding-inline:var(--full-width-padding-inline);text-align:center}@media(width>=1000px){footer{flex-direction:row;justify-content:space-between}}#back-to-top{--background-color: var(--color-gray-10);--background-color-hover: var(--color-gray-10);--color: var(--color-gray-98);--inset: 4rem;opacity:1;position:fixed;inset-block-end:var(--inset);inset-inline-end:var(--inset);z-index:1;font-size:2.4rem;transition:var(--animation-duration-fast) ease-in-out;transition-property:transform,opacity}#back-to-top:before{opacity:.7;transition:opacity var(--animation-duration-fast)}#back-to-top:hover:before{opacity:1}#back-to-top.hidden{opacity:0;transform:translateY(calc(var(--inset) + var(--padding) + 100% + 0px))}