.home{margin:5rem auto;max-width:65rem}.home img{margin-bottom:1.5rem}.home img:hover{filter:drop-shadow(0 0 2em #673ab8aa)}.home section{margin-top:5rem;display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem;row-gap:2rem}.home .resource{display:flex;flex-direction:column;padding:.75rem 1.5rem;border-radius:.5rem;text-align:left;text-decoration:none;color:#222;background-color:#f1f1f1;border:1px solid transparent}.home .resource time{display:flex;justify-content:flex-end}.home .resource:hover{border:1px solid #000;box-shadow:0 25px 50px -12px #673ab888}@media (max-width: 639px){.home section{margin-top:5rem;grid-template-columns:1fr;row-gap:1rem}}@media (prefers-color-scheme: dark){.home .resource{color:#ccc;background-color:#161616}.home .resource:hover{border:1px solid #bbb}}.blog-post{text-align:left;max-width:50rem;margin:2rem auto;font-size:1.2rem;line-height:calc(1.5 * 1.2rem)}.blog-post :is(h1,h2,h3,h4,h5,h6){margin-top:2rem;margin-bottom:1rem}.blog-post a{color:#ae80ff}.blog-post a:hover{color:#ff89ff}.blog-post pre{padding:1rem;border-radius:.5rem;overflow-x:auto;font-size:1rem;line-height:1.5rem}.blog-post :not(pre)>code{background-color:#404040;padding:2px 4px;border-radius:4px;font-size:1rem;line-height:1.5rem}.blog-post img{max-width:100%}.blog-post .button-container{display:flex;flex-direction:row;justify-content:space-evenly}.blog-post .button-container a{padding:.5rem 1rem;border:none;border-radius:.5rem;background-color:#ae80ff;color:#000;font-size:1rem;text-decoration:none}.blog-post .button-container a:hover{opacity:.8}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#222;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;background-color:#673ab8}header nav{display:flex}header a{color:#fff;padding:.75rem;text-decoration:none}header a.active{background-color:#0005}header a:hover{background-color:#0008}main{flex:auto;display:flex;align-items:center;max-width:1280px;margin:0 auto;text-align:center}@media (max-width: 639px){main{margin:2rem}}@media (prefers-color-scheme: dark){:root{color:#ccc;background-color:#1a1a1a}}