:root{--monospace: "Fira Code", monospace;--headline: "Publico Headline", -apple-system, "Helvetica","Arial";--background: #FCFCFD;--background-highlight: white}body,html{font-size:16px;background:var(--background);width:100vw;height:100vh;font-family:-apple-system, "Helvetica","Arial"}h1,h2,h3,h4,h5,h6{font-family:var(--headline)}h1{font-size:1.602rem}nav{display:flex;justify-content:space-evenly;align-items:baseline;transition:300ms all ease-in-out}nav ul{display:flex;list-style-type:none}nav ul li{margin:10px;font-family:var(--monospace)}main{margin:20px}main h2{text-align:center}.card{width:95vw;max-width:640px;margin:0 auto;padding-bottom:80px}.card.mini{background:var(--background-highlight);width:30vw;border:1px solid rgba(128,128,128,0.4);border-radius:13px;transition:300ms all ease-in-out;margin:auto;max-height:40vh;overflow-y:hidden;padding-bottom:5px}.card.mini img,.card.mini video{max-width:300px}.card:hover{border-width:4px}.card>*{margin:5px}.card a{text-decoration:none;color:inherit}.card .content a{color:lightcoral}.card .content a:hover{color:coral}.card pre{overflow:scroll;padding:10px;border-radius:4px}.card .top{display:flex;justify-content:space-between}.card .tags{list-style:none;display:flex;font-family:var(--monospace);color:orange}.card .tags *{margin:5px}.card .kind{text-transform:uppercase;font-family:var(--monospace);background:#8fceff;color:black;border-radius:4px;padding:10px;height:min-content;transition:300ms all ease-in-out}.card .kind:hover{color:#1a1a1a}.card img,.card video{max-width:60vw}.snippets{display:flex;flex-wrap:wrap;list-style:none;padding-bottom:80px}.snippets>*{margin:20px}.mono{font-family:var(--monospace)}a.clear{text-decoration:none;color:inherit}footer{position:fixed;bottom:0;text-align:center;width:100%;background:var(--background)}.resource{text-align:center;width:100%}@media screen and (max-width: 768px){.snippets{flex-direction:column;width:90vw;margin:0;padding:0}.snippets .card.mini{width:80vw;margin:0 auto}.snippets .card.mini img,.snippets .card.mini video{width:150px}nav{flex-direction:column;align-items:center}}.copy-code-button{color:#272822;background-color:#FFF;border-color:#272822;border:2px solid;border-radius:3px 3px 0px 0px;display:block;margin-left:auto;margin-right:0;margin-bottom:-1rem;padding:3px 8px;font-size:0.8em}.copy-code-button:hover{cursor:pointer;background-color:#F2F2F2}.copy-code-button:focus{background-color:#E6E6E6;outline:0}.copy-code-button:active{background-color:#D9D9D9}@media (prefers-color-scheme: dark){:root{--background: #1a1a1a;--background-highlight: black}a{color:#8fceff}}