#root{display:grid;grid-template-columns:auto minmax(320px,1800px) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"head head head" ".... main ...." "foot foot foot";width:100%;min-height:100vh;margin:0 auto;text-align:center}main{grid-area:main}footer{grid-area:foot}header{position:relative;grid-area:head;display:flex;flex-direction:column;align-items:start;justify-content:space-between;min-height:560px;height:36vw;max-height:1400px;padding:.5em;background-size:cover;background-repeat:no-repeat;background-position-y:80%;background-position-x:45%;transition:.25s ease}header h1.header-top{display:grid;gap:.15em;color:#f5f5f5e6;height:fit-content;margin:0 0 .15em .15em;padding:0;line-height:1;text-shadow:1px 1px 2px rgba(40,40,40,.33);transition:.25s ease}header h1.header-top span{cursor:pointer;justify-self:end;margin-left:.33em;font-size:.5em}header h1.header-top span:hover{opacity:.85;text-shadow:1px 1px 1px rgba(201,201,201,.068)}header div.header-bottom{display:flex;align-items:end;justify-content:space-between;width:100%}header a{color:#f5f5f5;text-decoration:none;font-weight:500}header a:hover{opacity:.8}header a.author{color:#28282880;font-size:.75em}header nav{display:flex;gap:1em;justify-content:end;margin:0 0 -.5em -.5em;padding:.5em;background-color:#2828288c;height:fit-content;border-radius:.1em .5em .1em .1em}header nav a{opacity:.9}header img.header-selfie{min-width:100px;width:6vw;max-width:150px;height:fit-content;border-radius:50%;border:3px solid #f5f5f573;transition:.33s ease-in-out}@media (max-width: 900px){header{background-position-x:65%}}@media (max-width: 420px){header h1.header-top{text-align:start;width:70%}header h1.header-top span{justify-self:start}header img.header-selfie{margin-top:.25em}header a.author{margin-bottom:-.4em}}@media (min-width: 1800px){header{margin-inline:auto;margin-top:.25em;width:80%;border-radius:1em;overflow:hidden}}footer{display:flex;flex-direction:column;gap:1em;background-color:#282828;color:#f5f5f5;padding-block:1.75em}footer a{text-decoration:none;color:#f5f5f5;font-weight:650}footer a:hover{opacity:.8}footer p{margin:0}footer .footer-social-wrap{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em;width:100%;height:2em}footer .footer-social-wrap button{display:grid;place-items:center;background:none;text-decoration:none;border:none;transition:.15s ease}footer .footer-social-wrap>button>i{font-size:2.5em;color:#918e9b}footer .footer-social-wrap button:hover{cursor:pointer;opacity:.65}footer .footer-social-wrap button:active{opacity:.35}section.cards-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}div.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;margin:1em;padding:1em;min-width:280px;width:25vw;max-width:360px;border:2px solid rgb(40,40,40,.25);border-radius:1em;transition:.25s ease}div.card:hover{border-color:#282828bf}div.card h2,div.card h3,div.card p{margin:0}div.card .preview{width:100%;border-radius:.5em;box-shadow:0 0 9px -3px #000}div.card .title,div.card .utils{margin-top:1em}div.card .utils .utils-title{margin-bottom:.25em}div.card .utils .utils-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em;font-weight:600}div.card .utils .utils-wrap .util{line-height:1;padding:.25em 1em;border:1px solid rgb(40,40,40,.8);border-radius:1em}:root{font-family:Quicksand,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;color:#282828de;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}